如何在图像标签中显示 SVG 的 URL？答案

【问题标题】：how to show URL of SVG in image tag?如何在图像标签中显示 SVG 的 URL？
【发布时间】：2020-10-27 19:16:25
【问题描述】：

我已经上传了 SVG 文件，这里是该文件的 url https://d37rj1mm6ksgs8.cloudfront.net/1593781915039-safety-goggles.svg

我想将此 URL 显示到图像标记中。但它不工作。如果您单击上面的 url，您将看到一个文件下载，并且该下载的文件在浏览器上显示为 SVG。 \

如何在图像标签中显示该 URL，或者是否有任何其他方式显示该文件。

下面是我的代码

<div className="lecture-media media-image image-loaded" style={{ height: "220px", width: "400px", }}>
  <LazyImage src={value.image_id.url} alt="img." placeholder={({ imageProps, ref, })=> (
    <i ref={ref} className="icn icn-img-loading is-centered"></i> )} actual={({ imageProps }) => (
    <div className={`LazyImage-Actual`}>
      <img {...imageProps} />
    </div>
    )} />
</div>

【问题讨论】：

@RobertLongson 我检查的图像也有 mime-type 是 application/octet-stream。它们显示在网站上。这是一张图片的网址。 d37rj1mm6ksgs8.cloudfront.net/1593773257491-Capture.PNG

标签： javascript html reactjs svg

【解决方案1】：

URL 的 response-header 表示 mime-type 是 application/octet-stream 您需要将其修复为 image/svg+xml。

您需要在服务器上修复它，即更改云端的一些配置。

【讨论】：