[求助贴] img 标签使用 src 属性无法显示 svg 图像

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 338 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在 vue 前端项目中，需要显示一张图片，图片 url 地址从接口获取，我无法从数据分辨图像类型（可能是 jpg/png/svg ）等

当我直接使用 img 标签，尝试使用 ur 显示这个图像时，svg 格式的图像无法正常显示

<img :src="url">

我直接在浏览器输入该 svg 图像的 url ，回车以后会直接下载该图片
我尝试使用 axios({ method: "get", url, responseType: "blob" }) 请求图像，可以成功获取，并通过以下方式将 svg 图像显示出来，请求如下：

axios({ method: "get", url: item.url, responseType: "blob" })
        .then((res: any) => {
            if (res?.hasError) {
                item.error = true;
                instance.delete(item.key);
                return;
            }

            let blob: any;
            if (item.mediaType === "IMAGE_SVG" || item.mediaType === "104" || res?.headers?.["content-type"] === "image/svg+xml") {
                blob = new Blob([res.data], { type: "image/svg+xml" });
            } else {
                blob = new Blob([res.data]);
            }

            el.setAttribute("src", URL.createObjectURL(blob));
            instance.caches.set(item.key, { status: 1, result: URL.createObjectURL(blob), responseData: res });

            // 动态获取大小
            if (res?.data?.size) {
                item.size = res?.data?.size;
            }

            item.error = false;
        })

请求返回的响应信息如下：

Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Cache-Control: max-age=0
Cache-Control: max-age=0
Connection: keep-alive
Content-Disposition: attachment; filename="ç¬”è®°.svg"
Content-Type: application/x-download;charset=UTF-8
Date: Thu, 21 Dec 2023 14:08:30 GMT
Expires: 0
Keep-Alive: timeout=4
Pragma: no-cache
Proxy-Connection: keep-alive
Server: nginx/1.20.1
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block

想求助下大佬们，为什么直接使用 img 标签的 src 无法显示 svg 图像？

5 条回复 • 2023-12-26 20:38:25 +08:00

yyhuan

338 天前

额。。。难道需要设置 content-type: image/svg+xml ？

DarknessAF

338 天前

是这个内容类型的问题，Content-Type: application/x-download; ，这种内容类型是浏览器会直接下载的，你可以先获取好 svg 文件的数据，然后用一个元素作为占位符，把获取到的 svg 数据直接插入占位符中，但是你需要注意下 vue 的 html 转码，推荐用下 v-html 。你也可以先 log 下获取到的 svg 数据是不是正常的。

yyhuan

337 天前

@DarknessAF 感谢~ 但是我还有点疑问是，我通过 img 标签的 src 显示图像时，jpeg 、svg 等类型的图像返回的响应头信息是
Content-Disposition: attachment; filename="1_25.4k.jpeg"
Content-Type: application/x-download;charset=UTF-8
都是 application/x-download ，但 jpeg 的图片可以显示，svg 的图像不能显示，这是因为浏览器的内容嗅探机制么？

DarknessAF

337 天前

> 这个可能是因为浏览器的没有兼容 svg 类型的数据流而已
> 内容类型为 Content-Type: application/x-download; 时可能浏览器会直接用 src 读取对应的数据流。
> img 标签有还有一种用法是这样的

```
<img src="data:image/svg+xml;utf8,<svg>...</svg>">
```

这个网站有各种数据的转换示例，你可以看看。
https://base64.guru/converter/encode/image/svg

yyhuan

333 天前

@DarknessAF 非常感谢大佬