React Won't Load Local Images

React won't load local images

When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} /> you need to use <img src={require('/images/image-name.png')} /> replacing image-name.png with the correct image name for each of them. That way Webpack is able to process and replace the source img.

React - local image won't load?

At the moment I can propose you two options.

Import your image as a component.

Just place this line of code in the head of your file:

import {ReactComponent as COMPONENT_NAME} from PATH

And place this COMPONENT_NAME in your other components. You can apply stying to it, props and etc.
Import your image path.

import IMAGE_PATH from PATH

And in your component:

<img src={IMAGE_PATH} {...options} />

My images in react will not load onto the page. How do I load a local image file?

If you need to go multiple nested folders up then for every folder you need another '../'

for example, if you have

 1. src
    2. folder
       3. folder
          index.js
    app.js

you would need to do '../../app.js'

if you are using a hard coded path, use quotes:

    <img
      alt="dolphin"
      src="../../images/dolphin.jpg"
      ariaLabel="dolphin"

    />

if you are pulling from say a JSON you would do something like:

const animals = {
  dolphin: {
    image: '../../images/dolphin.jpg',
    facts: ['Dolphins have been shown to give distinct names to each other!', 'Dolphins are known to display their own culture!', 'Dolphins have two stomachs!']
  },
  lobster: {
    image: '../../images/lobster.jpg',
    facts: ['Lobsters taste with their legs!', 'Lobsters chew with their stomachs!', 'Lobsters can live as long as 100 years.']
  },
  starfish: {
    image: '../../images/starfish.jpg',
    facts: ['Starfish can have up to 40 arms!', 'Starfish have no brain and no blood!', 'Starfish can regenerate their own arms!']
  }
};
const images = [];
for (const animal in animals) {
  images.push (
    <img
      alt={animal}
      src={animals[animal].image}
      ariaLabel={animal}
    />
  )
};
const allImages = 
(
  <div className='animals'>
  {images}
  </div>
)
ReactDOM.render(allImages , document.getElementById('root'));

Load local images in React.js

If you have questions about creating React App I encourage you to read its User Guide.

It answers this and many other questions you may have.

Specifically, to include a local image you have two options:

Use imports:

 // Assuming logo.png is in the same folder as JS file
 import logo from './logo.png';

 // ...later
 <img src={logo} alt="logo" />

This approach is great because all assets are handled by the build system and will get filenames with hashes in the production build. You’ll also get an error if the file is moved or deleted.

The downside is it can get cumbersome if you have hundreds of images because you can’t have arbitrary import paths.

Use the public folder:

 // Assuming logo.png is in public/ folder of your project
 <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

This approach is generally not recommended, but it is great if you have hundreds of images and importing them one by one is too much hassle. The downside is that you have to think about cache busting and watch out for moved or deleted files yourself.

Hope this helps!

React.js won't load a local file, passin background image style attribute as a prop

Try

import imgUrl from "./keyImages/0.jpeg";

      <Key
        style={{
          backgroundImage: 'url(' + imgUrl + ')',
          backgroundSize: "70px",
        }}
      />

How do I reference a local image in React?

First of all wrap the src in {}

Then if using Webpack;
Instead of:
<img src={"./logo.jpeg"} />

You may need to use require:

<img src={require('./logo.jpeg')} />

Another option would be to first import the image as such:

import logo from './logo.jpeg'; // with import

or ...

const logo = require('./logo.jpeg); // with require

then plug it in...

<img src={logo} />

I'd recommend this option especially if you're reusing the image source.

image doesn't show up on the web (React)

Your logic is correct. You just don't have images in your local environment.
You just need create the images folder and add the images locally.
I tested it with image links, it works fine.
Sandbox link

import React from "react";
const MyCollection = [
  {
    id: 0,
    path:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png"
  },
  {
    id: 1,
    path:
      "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Zm9jdXN8ZW58MHx8MHx8&w=1000&q=80"
  },
  {
    id: 2,
    path: "https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg"
  },
  {
    id: 3,
    path:
      "https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
  }
];

export default function App() {
  const [index, setActiveStep] = React.useState(0);
  const goToNextPicture = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };
  return (
    <div>
      {MyCollection[index] && (
        <>
          <img
            src={MyCollection[index].path}
            height={200}
            width={200}
            alt="images"
          />
          <div>{MyCollection[index].id}</div>
        </>
      )}
      <br />
      <input type="button" onClick={goToNextPicture} value="Next" />
    </div>
  );
}

Why won't React.js load the images from my disk even when the specified path is correct?

Your code, data.js, is looking for files inside a directory "../../images", which does not exist in your folder structure. What does exist is "../../Images".

React Won't Load Local Images