How to create relative path in React so images appear

Question

I was having a problem in my React app, where after going through a or the images would not show up. The CSS is defined, and the console shows a 500 error, although I have the pictures etc. Some of the code is like this;

          <img className="baner" src="/..img/icons/sold-out.png" alt="Item Sold Out"></img>

and some like this

        <img className="medium" src={product.image} alt={product.name} />

after doing some research, I found adding a / to the beinning of the path works. For example;

          <img className="baner" src="/../img/icons/sold-out.png" alt="Item Sold Out"></img>

That said, I do not how to add this into the second example, or that it would actually even work. Trying;

        <img className="medium" src=/{product.image} alt={product.name} />

produces errors, as does

        <img className="medium" src='/{product.image} alt={product.name} />
        <img className="medium" src={/{product.image}} alt={product.name} />

etc. I'm not sure how to make this work. Any help appreciated.

Please make sure to add some styles to your image tag like height and width. — dogukyilmaz, Feb 22 '21 at 23:17
I have the CSS set, it's less that, and changing a path. Ex: src={product.image} to src=" / {product.image}" or src="../ {product.image} — jtlovato, Feb 22 '21 at 23:20
Unfortunately I cannot do it that way, as it is looping over several dozen items. That would balloon my code from ten lines to over 1000. — jtlovato, Feb 22 '21 at 23:27
Also you can use literal template as you asked for using / src={`/${product.image}`} It does not seem here but there is symbols. — dogukyilmaz, Feb 22 '21 at 23:27
Ahhh, I think that did it! The one I didn't try, of course. with the back ticks did work. Thank you! — jtlovato, Feb 22 '21 at 23:29
Yeah :) Happy to help. Also fyi, {BACKTICK/${product.image}BACKTICK} is proper usage. — dogukyilmaz, Feb 22 '21 at 23:30

score 0 · Answer 1 · answered Feb 22 '21 at 23:34

0

For referencing local images you will need to import them like

import logo from './logo.png'; // Tell webpack this JS file uses this image

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

https://create-react-app.dev/docs/adding-images-fonts-and-files/

You can also see more details in this thread: How do I reference a local image in React?

answered Feb 22 '21 at 23:34

guilfer

164
1
12

Appreciate it! Unfortunately, it is looping over several dozen images, and I could not import them all. Thank you though! – jtlovato Feb 22 '21 at 23:47

score 0 · Accepted Answer · answered Feb 22 '21 at 23:38

0

<img className="medium" src={`/${product.image}`} alt={product.name}/>

answered Feb 22 '21 at 23:38

dogukyilmaz

585
5
11

score 0 · Answer 3 · answered Feb 23 '21 at 01:56

Here you have some ways to do this:

here is the code:

import logo from './logo.svg';
import './App.css';

function App() {
  const url = 'https://miro.medium.com/max/1920/1*hm7aE3BdUfUWUgBYK1GiZA.jpeg';
  return (
    <div className="App">
      <header className="App-header">
        {/*From proyect files */}
        <img src={logo} className="App-logo" alt="logo" width={400}/>  

         {/*From url on internet */}     
        <img src={url} className="App-logo" alt="logo"  width={400} />   

         {/*From public folder inside img folder */}    
        <img src='./img/react_image.jpg' className="App-logo" alt="logo"  width={400} />       
      </header>
    </div>
  );
}

export default App;

How to create relative path in React so images appear

3 Answers3