我在 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= 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
Select Language