Images not displaying in React

Question

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

React has nothing to do with whether an image renders or not. Check your network tab and I am willing to bet your url is incorrect or your image is not where you think it is. Your file structure tells us nothing without knowing how the files are served. — Deadron
– Deadron, Commented Jun 10, 2021 at 19:46
If you're using react-scripts to run your project, you'll need a public folder if you'd like to host images locally. Just like in the codesandbox you linked, you need to have a public folder at the top level of your project directory with the following structure for your image to work: public/src/img/icon.gif. — Dennis G.
– Dennis G., Commented Jun 10, 2021 at 19:57

Deadron · Accepted Answer · 2021-06-10 20:18:40Z

1

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.

answered Jun 10, 2021 at 20:18

Deadron

5,2891 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

physicsboy Over a year ago

Amazing! Can't see why you wouldn't be able to reference anything you like...

Deadron Over a year ago

You can reference anything you can actually reach. In a webpage this almost always means resources accessible via http. In order to access something via http you need an http server to make that resource available off your filesystem. In the setup you are using it starts a webserver but it then only serves the resulting js bundle file/s as well as the files in the public folder. You can't access anything else without changing the configuration of the webserver. This is the problem using react create app. There is a lot of hidden complexity when using it.

Collectives™ on Stack Overflow

Images not displaying in React

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related