CODEWITHSUNDEEP
javascriptreactjsimage
Srikanth Gowda
Srikanth Gowda

Reputation: 81

React Image Source

I can't seem to figure out why my relative path image loading doesn't work. The file structure where the assets are located are within the src folder in my working directory, but they don't seem to be working.

If I directly import import image from '../Assets/color/cloudy.svg'it works but otherwise it doesn't work. I don't want to directly import as the logic is to query the appropriate image (27 total images) based off the value passed through props.

Any help would be appreciated.


export default function Main(props) {
  const { weather } = props;
  //   let img_src = weather.weather_code.value;
  const img_src = '../Assets/color/cloudy.svg';
  console.log(img_src);
  return (
    <div className="center">
      <div className="title">
        <span className="currently">
          <span>
            <img src={img_src} alt="weather" />
          </span>
          <span className="description">
            <span className="summary">
              <span className="label">Temperature:</span>
              <span>
                {weather.temp.value} {weather.temp.units}
              </span>
            </span>
            <span className="summary-high-low">
              <span className="label">Feels Like:</span>
              <span>
                {weather.feels_like.value} {weather.feels_like.units}
              </span>
            </span>
          </span>
        </span>
      </div>
    </div>
  );
}

Upvotes: 0

Views: 145

Answers (2)

CevaComic
CevaComic

Reputation: 2114

One simple way is to create a folder under the public/ folder on your app, and put all images there.

and then in dev mode you can acc them like this:

<img src="/imageFolder/cloudy.png" alt="cloudy" />

This should work just fine in production too, because the folder under public is added to the project.

Upvotes: 1

njain
njain

Reputation: 157

If you are using webpack, you need to import the image :

<img src={require('images/06.jpg')} alt="product" />

As your images data is dynamic, directly specifying the import path like

<img src={require(image)} alt="product" />

doesn't work.

However you can import the image by making use of template literals like

<img src={require(`${image}`)} alt="product" />

Upvotes: 0

Related Questions