为什么我在 nextjs 中得到这个 svg 的 404？ [复制]答案

【问题标题】：why am i getting a 404 for this svg in nextjs? [duplicate]为什么我在 nextjs 中得到这个 svg 的 404？ [复制]
【发布时间】：2022-02-28 10:01:46
【问题描述】：

我有两个名为 play.svg 和 pause.svg 的 svg 文件正在另一个名为 index.js 的文件中使用。目录如下所示：

app
 components
  index.js
 pages
  _app.js
 public
  play.svg
  pause.svg

在 index.js 中是这样的：

import Image from 'next/image'
export default class Player extends Component {
 render() {
   return (
    <Image
     className="play-button"
     src={`/${isPlaying ? '../public/pause' : '../public/play'}.svg`}
     width="140"
     height="140"
     onClick={togglePlayPause}
    />
   )
 }
}

在 _app.js 中是这样的：

import Player from '../components/player'
function MyApp({ Component, pageProps }) {
 <Player />
}
export default MyApp

这导致两个 svg 文件的 404：GET http://localhost:57739/public/play.svg 404 (Not Found)

为什么这个 http://localhost:57739/public/play.svg 返回 404？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

从路径中删除../public，只使用/play.svg 或/pause.svg NextJS 将路径添加到webroot/public/

https://dev.to/dolearning/importing-svgs-to-next-js-nna

【讨论】：