web-dev-qa-db-ja.com

nginxで表示されるSVGイメージを構成する必要がありますか？

フォルダーにSVG画像があり、これらの画像がページに表示されるように1つのPNGファイルもあります。

私のnginx設定は基本的にこれです：

server {
    listen 80;

    location / {
        root www;
    }

}

画像はwww/imagesフォルダにあります。

私が見ているのは、ページ内の同じ構造です。

<img src="images/logo.svg">
<img src="images/logo.png">

PNGファイルは期待どおりにページに表示されますが、SVGは表示されません。ただし、ブラウザコード200の[ネットワーク]タブに表示されますが、本文は空です。

http://localhost/images/logo.svgのように直接開こうとすると、ファイルとしてダウンロードするだけです。

SVGファイルをPNG/JPGファイルなどのページに表示できるようにするには、特別な設定を追加する必要がありますか？

nginxstatic-content
1
Sergei Basharov

image/svg+xml svg svgz;のmimeタイプにSVG/etc/nginx/mime.typesを追加し、Nginxをリロードします。

1
deagh

Nginxが.svgファイルのmimeタイプを認識しない場合、コンテンツタイプヘッダーcontent-type: text/plainでファイルを提供し、ブラウザがそれらをレンダリングしないか、Webコンソールに警告を発行する場合があります。

  1. /etc/nginx/mime.typesがsvgイメージのmimeタイプを定義していることを確認します。

    types {
  ...
  image/svg+xml   svg svgz;
  ...
}

  2. /etc/nginx/nginx.confのhttpブロックにmime.typesファイルが含まれていることを確認します。

    http {
  include mime.types;
  ...
}

  3. ターミナルで、新しいnginx構成にエラーがないことを確認します。

    Sudo nginx -t

  4. 変更を有効にするためにNGINXを再起動します

    Sudo systemctl restart nginx   // e.g.: ubuntu

  5. ネットワークヘッダーの下にあるブラウザー開発ツールで、svgファイルがヘッダーContent-Type: image/svg+xmlで提供されていることを確認し、場合によってはWebページをハードリフレッシュしてブラウザーキャッシュを更新します。

2
Ananda Masri