I just switched the site from my working files to the server.
It worked fine when I uploaded it to my portfolio but once it was on the correct domain it stopped working. The image, instead of displaying, just shows up blank so I tried going to it's direct url.
Instead of it working it downloads the image instead of displaying it.
Here is the direct url: Direct url
My tag: <img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />
My structure:
// root (BBCM)
//// images
////// login_header.svg
//// css
//// js
// end root
I have tried:
/images/url.svg
the direct url for the image
BBCM/images/url.svg
It works fine when it's on my portfolio but not on the correct domain.
Any ideas? When the image downloads it also displays the correct image so I am a bit lost here.
Is your server sending the .svg file down with the correct MIME type? It should be image/svg+xml.
See Nginx offers of downoload SVG instead of showing it for another question along the same lines.
Some browsers don't allow the IMG tag to support SVG files, you can however put it in an object with an image as fallback in case the browser fails to render.
<object data="image.svg" type="image/svg+xml">
<img src="fallbackimage.jpg" />
</object>
try use <object data="/images/login_header.svg" type="image/svg+xml"></object> instead
Related
I uploaded an image to my web server just like all the images are. I created it in Photoshop and exported to a .png. The image resides under The code is src="" But the browser shows that the image does not exist. I've set permissions to 0777, I've changed the image path, tried a different image in the same path to confirm it's reading the path right, and the image will just not show. You can view the link here, it will show nothing
EDIT: This is what the image is suppose to look like
EDIT: Removed links for privacy
You forgot " at the end.
It should be like this:
src="img/SccBridgeLogo.png"
OR
Try adding / at the beginning of the path, that should tell the browser to search from index directory.
src="/img/SccBridgeLogo.png"
Note this only works if you are running on a site, running from index.html in browser will return in
File:////
I had to use the picture tag for fallbacks and came across this issue at that point.
This use to work fine
<img src="images/netgraph-logo.png" alt="NetGraph Logo">
After adding the picture tag
<picture>
<source srcset="images/netbob-logo.webp" type="image/webp">
<source srcset="images/netbob-logo.png" type="image/png">
<img src="./images/netbob-logo.png" alt="NetBob Logo">
</picture>
In my case I was able to go down one folder from the root folder, therefore "./" preceding the rest of the url worked fine. You may need to back up several folders instead though, so be sure you are using the correct type of path.
I usually using an Iframe with src pointing to a HTML file containing an image:
Iframe
<iframe src="/image.html">
Image.html
<img src="/hello.jpg">
However, one time I accidentally used the image path in the Iframe
<iframe src="/hello.jpg">
And it still work perfectly. Is it a normal way to use this method? I am considering if there will be any inconsistent problem on different browsers / or does this method officially allowed in HTML.
Thanks.
I've got an .svg file with some code in it.
If I just put that code in my HTML with the <svg> tag it works fine.
The problem is is that I've got quite a lot of code in my .svg and I don't want to put all that code in my HTML. So I've made an .svg file and tried to link it, but it didn't seem to link.
Does anyone know how I'm supposed to link an .svg file to a HTML file?
The easiest (and probably most correct) way of doing this is to simply put your SVG file as src in an <img> tag as if it were any other format.
Keep in mind that this might not work in some older browsers (this is the problem is general with SVG, not just with using it in an img tag).
Another option is using it inside an <object> tag, as seen in this article (which also breaks down the two options and the drawbacks of both):
<object type="image/svg+xml" data="kiwi.svg" class="logo">
Kiwi Logo <!-- fallback image in CSS -->
</object>
In this case, your retain the ability to affect the parts of your SVG with CSS - which may or may not be what you want.
I would usually use it inside an using <img src="link to svg file" />
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" />
How to Add Scalable Vector Graphics to Your Web Page
for example you can use :
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>
I am running IIS 6, I know it is out dated but that is what I am stuck with. I am wanting to use svg files for image src. I added the .svg mime type of image/svg+xml and I can request svg files through the browser and it displays correct instead getting 404 errors. I don't care about supporting IE 8 or older so I don't need a fallback image.
The problem now is that if I put this in my html I get an empty image but I put this url in the browser the svg image show fine.
This works
http://localhost/test.svg
This does not work
<img src="test.svg" />
So how do I get the svg image to show as an image in my html?
This issue ended up being that the SVG file that was generated did not have the width and height specified.
I have just finished making a flash banner in Fl5 and have embedded it into my website.
I can view it in my browser by going directly to the file however when it is embedded the photos will not load. The images it loads has to be in the same directory as the .swf file and as i stated it clearly works when going directly to the file but not once it has been embedded.
If someone else has had this issue or knows how to fix it, please help me
Thank You.
the directory of where the flash file can be found is:
http://tinyurl.com/6q5pu79
the website address is:
http://tinyurl.com/7x7nzz3
C
The paths you specify for the images in your code are by default relative to the HTML file where they are embedded (if you go directly to the swf, they're relative to the swf). You can fix that by using the base parameter when you embed.
Add a param in your HTML:
<param name="base" value="banner" />
... inside both <object> elements.
That tells FlashPlayer that relative paths in your code are relative to the "banner" directory rather than the directory where the HTML file is.