1

I have two svg files called play.svg and pause.svg that are being used in another file called index.js. The directory looks like this:

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

In index.js is this:

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}
    />
   )
 }
}

In _app.js is this:

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

This results in a 404 for both svg files: GET http://localhost:57739/public/play.svg 404 (Not Found)

Why is this http://localhost:57739/public/play.svg returning a 404?

calyxofheld
  • 1,538
  • 3
  • 24
  • 62

1 Answers1

3

Remove ../public from the path and just use /play.svg or /pause.svg NextJS adds the path to the webroot/public/

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

nito
  • 1,157
  • 8
  • 21