CODEWITHSUNDEEP
htmlcssreactjsimage
physicsboy
physicsboy

Reputation: 6348

Images not displaying in React

I have read multiple sources, and even attempted to pretty much copy this codesandbox, but it doesn't seem to help me at all.

File structure

src
  icon.gif
  App.jsx
  index.js
  styles.css

component

export default function App() {
  return (
    <div className="App">
      <img src="src/img/icon.gif" alt="icon" />
    </div>
  );
}

Here is my sandbox to play with

Upvotes: 0

Views: 814

Answers (1)

Deadron
Deadron

Reputation: 5289

Move your image into your public folder and reference it via the path /icon.gif

In order to reference an image the image needs to be accessible via http directly. This is what your public folder exists for is to contain these resources and make them available. Your src folder should only contain source files such as JavaScript and in this case CSS.

Upvotes: 1

Related Questions