CODEWITHSUNDEEP
htmlimagesvg
Josh Powell
Josh Powell

Reputation: 6297

Image url downloads the image instead of displaying it

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:

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.

Upvotes: 21

Views: 26158

Answers (3)

Remy Lagerweij
Remy Lagerweij

Reputation: 177

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>

Upvotes: 1

Olly Hodgson
Olly Hodgson

Reputation: 15795

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.

Upvotes: 12

LorDex
LorDex

Reputation: 2636

try use <object data="/images/login_header.svg" type="image/svg+xml"></object> instead

Upvotes: 0

Related Questions