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

查看 54|回复 1
作者:yyhuan   
我在 vue 前端项目中,需要显示一张图片,图片 url 地址从接口获取,我无法从数据分辨图像类型(可能是 jpg/png/svg )等
[ol]
  • 当我直接使用 img 标签,尝试使用 ur 显示这个图像时,svg 格式的图像无法正常显示
    [/ol]

    [ol]
  • 我直接在浏览器输入该 svg 图像的 url ,回车以后会直接下载该图片
  • 我尝试使用 axios({ method: "get", url, responseType: "blob" }) 请求图像,可以成功获取,并通过以下方式将 svg 图像显示出来,请求如下:
    [/ol]
    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 图像?

    Blob, svg, res, url

  • yyhuan
    OP
      
    额。。。难道需要设置 content-type: image/svg+xml ?
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部