V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yyhuan
V2EX  ›  前端开发

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

  •  
  •   yyhuan · 315 天前 · 972 次点击
    这是一个创建于 315 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    1. 当我直接使用 img 标签,尝试使用 ur 显示这个图像时,svg 格式的图像无法正常显示
    <img :src="url">
    
    1. 我直接在浏览器输入该 svg 图像的 url ,回车以后会直接下载该图片
    2. 我尝试使用 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
        1
    yyhuan  
    OP
       315 天前
    额。。。难道需要设置 content-type: image/svg+xml ?
    DarknessAF
        2
    DarknessAF  
       315 天前   ❤️ 1
    是这个内容类型的问题,Content-Type: application/x-download; ,这种内容类型是浏览器会直接下载的,你可以先获取好 svg 文件的数据,然后用一个元素作为占位符,把获取到的 svg 数据直接插入占位符中,但是你需要注意下 vue 的 html 转码,推荐用下 v-html 。你也可以先 log 下获取到的 svg 数据是不是正常的。
    yyhuan
        3
    yyhuan  
    OP
       314 天前
    @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
        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
    yyhuan
        5
    yyhuan  
    OP
       310 天前
    @DarknessAF 非常感谢大佬
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1311 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 23:29 · PVG 07:29 · LAX 16:29 · JFK 19:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.