Codesandbox.Io <Img> Tag Not Loading Image

CodeSandbox.io img tag not loading image

If in the public folder, use file path relative to it, i.e. public/img/image.jpg, otherwise, if the source image is in your component directories, you use require and relative path:

Given component in src/components and image is in src/img

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img
          src={require("../img/business-landing-page-template-with-photo_52683-19539.jpg")}
          alt="Mountain"
        />
        // or in public
        <img
          src="src/img/business-landing-page-template-with-photo_52683-19539.jpg"
          alt="cat"
        />
      </div>
    </navbar>
  )
}

img tag not loading CodeSandbox.io

Codesandbox doesn't support directly importing images. Instead, you can either add them as static uploads and reference their uploaded URL or import them as React components:

img src doesn't load image through function

You can split you component into small ones. Let's say Gallery and GalleryImage.

GalleryImage will take src and description props. Declare a imageSrc state variable in this component. Then you can do your call in the useEffect (with src in the dependencies array) and then set the imageSrc state when the call is complete. Calling setImageSrc will trigger a re-render.

Updated sandbox : https://codesandbox.io/s/silly-fire-f84e95

Why is my image not loading even though the code is correct?

Try just importing it instead?

Heres an example you might be able to use for your content array:

https://codesandbox.io/s/compassionate-ellis-qitz4?file=/src/App.js

import img from "./img/img.jpg"
//const img = require("./img/img.jpg")
const App = () => {
  return  (
    <Img src={img} alt={alt} />
  )

}

How to load a image path through props in react

Try wrapping your imported image inside curly braces {} instead of double quotes "" since they are being used for strings.

import amy from "./amy.jpg";

export default function App() {
  return (
    <div className="App">
      <AvatarProfileIcon icon={amy} />
    </div>
  );
}

Live Demo

Image doesn't show up with props in ReactJS

You should move your assets to the public folder instead of keeping them in the src folder. Also, you can use CDN for images if available.

Please refer to this link: React, load images local from json

My Working Code Link: https://codesandbox.io/s/zealous-borg-usgyqv

Custom SVG is not loading in my image tag

To be honest I'm not sure if there's an issue with external/cross-domain image resources in codesandbox (could also be an issue developing locally). The duplicate Robert tagged leads me to believe the issue is with this specific SVG asset itself.

But there is still a way to render it.

Import the svg image as a ReactComponent and render it instead of the img tag.

Source

import { ReactComponent as Icon} from "./icon.svg";

...

<Icon
  style={{
    width: 48,
    height: 48
  }}
  onMouseEnter={() => {
    setSelectedProperty(item);
    setIsPopupShown(true);
  }}
  onMouseOut={() => {
    setSelectedProperty(null);
    setIsPopupShown(false);
  }}
/>

ReactJS img not updating after API Call

Issue

The img tag loads all the images fine for the first call however, the
problem is that when I do another zipcode and clicked search, the
texts updated, but the img tag (the weather images) did not update (
i.e. first search 91001 everything looks great, searched again for
95133, name changed to San Jose but the weather forecast images did
not update from 91001's to 95133's)

You always append forecast data to the forecast state but only reference the first 8 elements.

response["daily"].forEach((day) => {
  setForcast((forecast) => [
    ...forecast, // <-- shallow copy persists old forecast data
    day["weather"][0]["icon"]
  ]);
});

...

<img
  src={`http://openweathermap.org/img/wn/${props.forecast[0]}@2x.png`}
  alt="forecast image"
/>

...

<img
  src={`http://openweathermap.org/img/wn/${props.forecast[1]}@2x.png`}
  alt="forecast image"
/>
<img
  src={`http://openweathermap.org/img/wn/${props.forecast[2]}@2x.png`}
  alt="forecast image"
/>
<img
  src={`http://openweathermap.org/img/wn/${props.forecast[3]}@2x.png`}
  alt="forecast image"
/>
<img
  src={`http://openweathermap.org/img/wn/${props.forecast[4]}@2x.png`}
  alt="forecast image"
/>
<img
  src={`http://openweathermap.org/img/wn/${props.forecast[5]}@2x.png`}
  alt="forecast image"
/>
<img
  src={`http://openweathermap.org/img/wn/${props.forecast[6]}@2x.png`}
  alt="forecast image"
/>
<img
  src={`http://openweathermap.org/img/wn/${props.forecast[7]}@2x.png`}
  alt="forecast image"
/>

Solution

To resolve, you should overwrite the forecast state when updating.

setForcast(response.daily.map((day) => day.weather[0].icon));

Here's a "optimized" button click handler.

<Button
  onClick={async () => {
    setLoading(false);

    const weather = await currentWeather(zipcode, apiKey);
    setWeatherData(weather);
    console.log(weather);

    const forecast = await sevenDayWeather(
      weather.coord.lon,
      weather.coord.lat,
      apiKey
    );
    setForcast(forecast.daily.map((day) => day.weather[0].icon));

    setLoading(true);
  }}
>
  Search
</Button>

And for the sake of DRY-ness, mapped forecast images.

{props.forecast.map((id, index) => (
  <img
    key={index}
    src={`http://openweathermap.org/img/wn/${id}@2x.png`}
    alt="forecast image"
  />
))}

---

Related Topics