如何使用 Next.js 中的 next/image 或 <img> 渲染来自 api 响应的 SVG？

Question

我从 api 响应中得到了一堆 svg，我在 useEffect 中得到了它们。响应看起来像这样

{svg1: 'https://remoteserver.com/assests/svg1.svg', ...and so on}

（这些 svg 不是静态的，来自 /public 文件夹。所以我不会在顶部导入它们。）我想使用 next/image 或普通 <img> 标签在 nextjs 中呈现它们，将 url 传递到 src。我知道 next.js 默认情况下不支持 svgs。

 <Image alt='SVG from api'
        src={response.svg1}
        width={'45px'}
        height={'45px'}
        objectFit='contain' />

根据 docs，dangerouslyAllowSVG 可以做到这一点，但这里存在安全风险，所以我不想走这条路。我知道像 SVGR and babel-inline-svg 这样的包可以解决这个问题，但它们是为了使用 svgs 作为反应组件。我也试过 next-images 并在 next.config.js.

中使用了 withImages

const withImages = require('next-images')
module.exports = withImages({
     reactStrictMode: true,
     env: {
        BASE_URL: process.env.BASE_URL
        },
     images: {
      domains: ['remoteserver.com', 'remoteserver2.com']
      },
  webpack(config, options) {
    return config
  }
})

但是当我尝试 next build 时构建失败了。

./static/images/Logo.png
TypeError: unsupported file type: undefined (file: undefined)

我missing/doing哪里错了？有没有其他解决方案？

Answer 1

显然我选择了 dangerouslyAllowSVG 并添加了 CSP headers。仍然没有从 next/image 加载 <Image /> 的 svg。不过，当我使用普通的 <img> 标签时它起作用了。虽然不确定这是否是最佳解决方案 :)

如何使用 Next.js 中的 next/image 或 <img> 渲染来自 api 响应的 SVG？

How to render SVGs coming from api response using next/image or <img> in Next.js?

javascript

svg

reactjs

webpack

next.js