nginx not serving svg files

1.5k Views Asked by At

I have created an Ionic app using Angular and deployed it to android, iso and web. But the web version doesnt display the svg althought it is being rendered into the dom. I use nginx image to build the docker conainter and after a lot of googling i found i need to include mime.types in nginx.conf and also add

image/svg+xml svg svgz;

into my mime.types which was already present. I have tried almost all fixes but the svgs still dont work.

Here is my nginx config

worker_processes 4;

events { worker_connections 1024; }

http {
    include mime.types;
    default_type application/octet-stream;

    server {
        listen 8080;
        root  /usr/share/nginx/html;

        location / {
          try_files $uri /index.html;
        }

        location /health-check {
          access_log off;
          return 200;
          add_header Content-Type text/plain;
        }
    }
}

Here is a response to my curl request looks like

curl -I https://my-webiste-domain.com/svg/mail.svg

HTTP/2 200 
date: Fri, 16 Oct 2020 08:38:59 GMT
content-type: text/html
content-length: 1270
server: nginx/1.19.3
last-modified: Fri, 16 Oct 2020 05:47:23 GMT
etag: "5f8933eb-4f6"
accept-ranges: bytes

I think the content type should be

Content-Type: image/svg+xml
1

There are 1 best solutions below

0
On

@RobertLongson Thanks for pointing the curl command. I ran the command with just CURL and i found that it was serving index.html file. Upon close inspection to my docker container i found that the copy command didn't persist the subdirectories when copied to nginx/html and copied everything to nginx/html. Due to which there wasnt any svg directory. But i think try_files in nginx.conf always served index.html with status 200.

anways

changed this

COPY www/* /usr/share/nginx/html/

to this in my dockerfile

COPY ./www /usr/share/nginx/html/

That fixed the issue.