0

I have a locally hosted web app, whose root directory looks like this:

|- index.php
|- img
   |-physics.svg

When I access http://localhost/img/physics.svg, the vector image is successfully displayed on the page. When I access http://localhost/index.php, which includes the line:

<div style="...; background-image: url(./img/physics.svg)"></div>

The browser shows a status 200 in the Network tab of the dev tools. However, the image loaded appears to be a blank. Is there any explanation/solution to this problem?

Also, this problem only happens on localhost. When I deploy the app to gcp, it works just fine, showing the images as normal.

Neil Lu
  • 169
  • 1
  • 12
  • 1
    Tried clearing your browser cache? Does the _Network_ panel show the correct mime type and size for the resource? Taking a guess here but perhaps your HTTP server is delivering `.svg` as `text/plain` or `text/xml` – Phil Jan 05 '22 at 00:00
  • 1
    Thanks! I eventually fixed it by setting the header content type to ``image/svg+xml`` – Neil Lu Jan 05 '22 at 05:19
  • In that case, throw an upvote towards [this answer in the duplicate](https://stackoverflow.com/a/51988510/283366) – Phil Jan 05 '22 at 05:25

0 Answers0