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
@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
to this in my dockerfile
That fixed the issue.