时间戳

首页 > 解决方案 > 如何在图像标签中显示 SVG 的 URL？

javascript - 如何在图像标签中显示 SVG 的 URL？

问题描述

我已经上传了 SVG 文件，这里是该文件的 网址 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>

标签： javascripthtmlreactjssvg

解决方案

URL的响应标头表明 mime-type 是 application/octet-stream 您需要将其修复为 image/svg+xml。

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

推荐阅读