Reactjs 无法将 SVG 导入 Next.js

发布于03月15日

当我try 导入SVG图像时，会显示以下错误.导入SVG图像必须使用哪个加载程序？

./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123-16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>

// next.config.js module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, issuer: { test: /\.(js|ts)x?$/, // for webpack 5 use // { and: [/\.(js|ts)x?$/] } }, use: ['@svgr/webpack'], }); return config; }, };

Reactjs 无法将 SVG 导入 Next.js

推荐答案

Reactjs相关问答推荐

如何实现黑暗模式 map ？

迁移到React Router Dom v6后，我是否错误地使用了Link组件？

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

在新屏幕上显示照片时出现问题-react

React，当我调用handleSubmit()函数时，我正在将application/json和multiform/data中的数据发送到后端，但student_image中没有数据：null

React-apexcharts 中的 Y 轴刻度不会动态更新符号

我从 S3 存储桶下载图像时收到错误

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

为什么在 React 的 useEffect 中使用 onAuthStateChanged ？

从 redux 调用UPDATE_DATA操作时状态变得未定义

redux 工具包使用中间件构建器函数时，必须返回一个中间件数组

使用 react pro 侧边栏展开折叠菜单

为嵌套路由配置一个不存在的 url 的重定向

使用dayjs时如何在输入类型日期时间本地字段中设置默认值？

如何将值从下拉列表传递到 select 上的输入？响应式JS

Mui CardMedia 的图片组件

为什么此代码中的 useState 不更新(文本更新但 id 不更新)？

如何使用 UseState 正确测试组件

Axios 删除在带有授权令牌的react js 中不起作用

React 似乎在触发另一个组件时重新渲染了错误的组件