I have this file named loadingReviewButtonSpinner.gif, and this file is saved on my computer in the folder where I have my project images (assets/images), but I'm trying to reference to this file in my SVG, and it isn't working.
<svg
<image
width="70" height="70"
transform="translate(30.1 -7.5)"
href="loadingReviewButtonSpinner.gif"
/>
</svg>
I have also uploaded this same image (loadingReviewButtonSpinner.gif) to a server online, and when I do the reference to the online image, it working 100%
<svg
<image
width="70" height="70"
transform="translate(30.1 -7.5)"
href="https://tinypic.host/images/2022/05/18/animation_500_l1ki69jf.gif"
/>
</svg>
But I really need it to work for me referring to the folder where my project is.
And I already tried so many options, but none of them is working...
For example, I tried:
href="file://loadingReviewButtonSpinner.gif" (and the variations with the path)
href="//..//..loadingReviewButtonSpinner.gif"
href="file:///loadingReviewButtonSpinner.gif"
I did what was said in the comment and it worked.
Related
I have a problem with serving a static image from my public/images folder.
It correctly displays in the files I've been working on so far EXCEPT the dynamic file [itemId].js (shown in the picture below)
The most interesting clue I have is this error in the console.
http://localhost:3000/items/_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=1920 404 (Not Found)
It tries to serve from /items, which is not what I want at all...
Does anyone know what's the trick behind this? If you need more informations, let me know.
// in components/Header.js (which is wrapping all of my pages)
import bannerBig from "../public/images/banner-big.png";
// then i use it this way with the Image component from next/image
<Image src={bannerBig} alt="midnight city" width={1920} height={800}/>
The img generated by the <Image /> component looks like this and is the same accross all of my pages:
<img alt="midnight city" src="_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=3840" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=1920 1x, _next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=3840 2x">
so I finally fixed the problem by adding a '/' before my static image path so it's always being served from the root
<Image
src={"/" + bannerBig.src}
alt="midnight city"
width={bannerBig.width}
height={bannerBig.height}
/>
I am just trying to add the image on index.html. I have create a folder of images under webcontent and add the image in images folder. I am calling it in the following way:
<HBox >
<Image
src="{./images/abc1.jpg}"
width="100%"
height="100%"/>
</HBox>
But it is showing nothing on browser. Please advice.
You use curly brackets when you are trying to bind data from a model.
Since you are not using a model to bind data. You can remove it and try.
Code for the same is as mentioned here:-
<HBox>
<Image src="./images/abc1.jpg" width="100%" height="100%"/>
</HBox>
I tried to do everything, but I really can't get a way, how to change font size in drawString element. See the example below please
<illustration width="20" height="20">
<image file="checkbox.png" x="10" y="20" width="7" preserveAspectRatio="true" />
<drawString x="20" y="20">YES</drawString>
<image file="checkbox.png" x="10" y="10" width="7" preserveAspectRatio="true" />
<drawString x="20" y="10">NO</drawString>
</illustration>
This is my code, however I have really no idea where the font-size comes from. And I am unable to find how to change font size for words "YES" and "NO". Can anybody help? Thank you a lot
The problem can be resolved by using
<setFont name="fnt1" size="11"/>
before element.
I have an RadToolbar control on my Page. The problem is the Images I have placed on my buttons don't show. My code seems fine. Whats the issue?
<telerik:RadToolBar Grid.Row="1"
Margin="20,20,5,10">
<Button Width="25"
Click="OnInsertClick">
<Image Source="Images/add.png"/>
</Button>
<Button Width="25">
<Image Source="Images/delete.png"/>
</Button>
</telerik:RadToolBar>
I also tried addressing like /Images/add.png but to no avail
It depends on where your page is located in the project. If it's on the same level as Images folder, your code should work. But if it's in separate folder, you'll need to use dots to go up a level:
<Image Source="../Images/add.png"/>
If your page is located deeper in folder structure, you'll need to add dots for every level.
Alternatively, you can use full notation to avoid playing with dots (change the name for your assembly name from project properties):
<Image Source="/AssemblyName;component/Images/add.png"/>
In my XUL I have the following code fragments:
<map name="KeypadMap">
<area href="javascript:pad('A')" coords="1,1,31,31" shape="rect"/>
</map>
...
<hbox flex="1">
<image src="./keypad.png" width="32" height="32" useMap="#KeypadMap"/>
</hbox>
The image displays just fine, however, when I mouse over, the cursor does not change to a hand, and clicking does not call the pad function.
Similar code works fine in straight HTML, so there must be some trick to get it working via a Firefox XUL file.
You'll have to use a namespace to embed HTML inside of XUL. Check this guide.