Next JS 不从 api 加载 svg答案

【问题标题】：Next JS Not loading svg from apiNext JS 不从 api 加载 svg
【发布时间】：2023-02-13 22:21:35
【问题描述】：

版本：

反应：18.2.0
NextJS：12.2.0

当在 <img /> 标签内使用且 src 属性设置为 data:image/svg+xml;utf-8,[svg data here] 时，简单图像资产只是拒绝加载

当我将这个 url data:image/svg+xml;utf-8,[svg data here] 直接粘贴到浏览器中时，一切都按预期正常加载，源图像和所有其他东西都在那里。 next.config 具有所有必需的图像配置，在图像代码中，我们目前使用普通的 <img /> 标签。资产在未像 svg 那样调用时加载正常，例如src="https://external-api/image.jpeg" 在网络选项卡中，图像的响应始终为 200，但预览仅显示带有缺失图像默认占位符的 svg 样式。

如果我将图像粘贴到 THIS 在线编码器中，则图像不会加载（就像我的问题一样），但如果我从页面复制编码的 url 并将其粘贴到新的 chrome 选项卡中，图像加载时没有任何问题。

例子：

Source image
进入src的Svg代码

data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1044 1054' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg opacity='.7' filter='url(%23a)'%3E%3Cpath d='M309.796 414.322 190.497 535.433 467.98 803.76l119.299-121.111-277.483-268.327Z' fill='%23000'/%3E%3C/g%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='116' y='91' width='837' height='837'%3E%3Crect width='440' height='1000' rx='220' transform='matrix(-.70604 .70817 .70746 .70675 335.664 0)' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='url(%23c)' d='M109 84h850v850H109z'/%3E%3C/g%3E%3Crect width='294.223' height='822.461' rx='147.112' transform='matrix(-.70575 .70846 .70718 .70704 228.716 325)' fill='url(%23d)'/%3E%3Cdefs%3E%3Cpattern id='c' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23d'/%3E%3C/pattern%3E%3Cfilter id='a' x='.497' y='224.322' width='776.782' height='769.437' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='95' result='effect1_foregroundBlur_3332_33632'/%3E%3C/filter%3E%3Cimage id='d' width='1' height='1' xlink:href='https://fakeimg.pl/250x300/fff000/'/%3E%3C/defs%3E%3C/svg%3E

以及如何在应用程序中呈现

尝试了什么：

如果图像编码为base64 可以工作，但主要在较旧的 IOS 设备上存在巨大的性能缺陷。
dangerouslyAllowSVG 的下一个配置选项不会改变任何东西......

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

您可以尝试使用诸如 svg-inline-loader 之类的库来加载您的 SVG 图像。

npm install svg-inline-loader --save-dev

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /.svg$/,
        use: [
          {
            loader: 'svg-inline-loader'
          }
        ]
      }
    ]
  }
};

然后，您可以在 React 组件中导入和使用 SVG 图像：

import React from 'react';
import svg from './image.svg';

const Image = () => (
  <img src={svg} />
);

export default Image;

【讨论】：