我在 vue 前端项目中,需要显示一张图片,图片 url 地址从接口获取,我无法从数据分辨图像类型(可能是 jpg/png/svg )等
<img :src="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 图像?
1
yyhuan OP 额。。。难道需要设置 content-type: image/svg+xml ?
|
2
DarknessAF 315 天前 1
是这个内容类型的问题,Content-Type: application/x-download; ,这种内容类型是浏览器会直接下载的,你可以先获取好 svg 文件的数据,然后用一个元素作为占位符,把获取到的 svg 数据直接插入占位符中,但是你需要注意下 vue 的 html 转码,推荐用下 v-html 。你也可以先 log 下获取到的 svg 数据是不是正常的。
|
3
yyhuan OP @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 的图像不能显示,这是因为浏览器的内容嗅探机制么? |
4
DarknessAF 314 天前
> 这个可能是因为浏览器的没有兼容 svg 类型的数据流而已
> 内容类型 为 Content-Type: application/x-download; 时可能浏览器会直接用 src 读取对应的数据流。 > img 标签有还有一种用法是这样的 ``` <img src="data:image/svg+xml;utf8,<svg>...</svg>"> ``` 这个网站有各种数据的转换示例,你可以看看。 https://base64.guru/converter/encode/image/svg |
5
yyhuan OP @DarknessAF 非常感谢大佬
|