'How do I reference a local image in React?

How can I load image from local directory and include it in reactjs img src tag?

I have an image called one.jpeg inside the same folder as my component and I tried both <img src="one.jpeg" /> and <img src={"one.jpeg"} /> inside my renderfunction but the image does not show up. Also, I do not have access to webpack config file since the project is created with the official create-react-app command line util.

Update: This works if I first import the image with import img from './one.jpeg' and use it inside img src={img}, but I have so many image files to import and therefore, I want to use them in the form, img src={'image_name.jpeg'}.

reactjs

Solution 1:^[1]

The best way is to import the image first and then use it.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
}

Solution 2:^[2]

Inside public folder create an assets folder and place image path accordingly.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

Solution 3:^[3]

you need to use require and . default

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

Solution 4:^[4]

You need to wrap you image source path within {}

<img src={'path/to/one.jpeg'} />

You need to use require if using webpack

<img src={require('path/to/one.jpeg')} />

Solution 5:^[5]

the best way for import image is...

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

Solution 6:^[6]

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

Solution 7:^[7]

put your images in the public folder or make a subfolder in your public folder and put your images there. for example:

you put "completative-reptile.jpg" in the public folder, then you can access it as

src={'/completative-reptile.jpg'}

you put completative-reptile.jpg at public/static/images, then you can access it as

src={'/static/images/completative-reptile.jpg'}

Solution 8:^[8]

I had the same problem and after research I managed to solve it by putting the JSON data in a constant in JS, with that I was able to import the image and only inform the import in the JSON object. Example:

import imageImport from './image.png';

export const example = [
  {
    "name": "example",
    "image": imageImport
  }
]

<Image source={example.image}/>

Solution 9:^[9]

You have two ways to do it.

First

Import the image on top of the class and then reference it in your <img/> element like this

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
}

Second

You can directly specify the image path using require('../pathToImh/img') in <img/> element like this

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

Solution 10:^[10]

For people who want to use multiple images of course importing them one by one would be a problem. The solution is to move the images folder to the public folder. So if you had an image at public/images/logo.jpg, you could display that image this way:

function Header() {
  return (
    <div>
      <img src="images/logo.jpg" alt="logo"/>
    </div>
  );
}

Yes, no need to use /public/ in the source.

Read further: https://daveceddia.com/react-image-tag/.

Solution 11:^[11]

I found another way to implement this (this is a functional component):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

Hope it helps!

Solution 12:^[12]

Step 1 : import MyIcon from './img/icon.png'

step 2 :

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>

Solution 13:^[13]

First you have to import the image

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

then plug it in...

<img src={logo} />

That's it.

Solution 14:^[14]

For the require method to work, I had to add ".default", like this:

<img src={require('./path/to/image.svg').default} />

Solution 15:^[15]

My answer is basically very similar to that of Rubzen. I use the image as the object value, btw. Two versions work for me:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

Without wrappers - but that is different application, too.

I have checked also "import" solution and in few cases it works (what is not surprising, that is applied in pattern App.js in React), but not in case as mine above.

Solution 16:^[16]

As some mentioned in the comments, you can put the images in the public folder. This is also explained in the docs of Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/

Solution 17:^[17]

If you dont want to put your image inside public folder use below syntax

 src={require("../../assets/images/img_envelope.svg").default}

Solution 18:^[18]

I have used this way, and it works... I hope you useful.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

Solution 19:^[19]

import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

export default Image

Solution 20:^[20]

You could create a file named for instance images.js and reference all your app resources there, later importing that component in all your other component where you would need to display images

Solution 21:^[21]

I wanted to import multiple images and pass them to different components. It turned out that I need to import multiple images only once and I can use them in any component by passing a prop.

import whiskey from './img/whiskey.jpg';
import hazel from './img/hazel.jpg';
import tubby from './img/tubby.jpg';

Let's make an object.

dog = [
   { name: "Whiskey", src: whiskey }, 
   // ...
]

And display the image

<img src={dog.src}></img>

Solution 22:^[22]

I actually just ran into this very same problem and if you move your image file from the ./public directory to the ./src directory you can import or require and either will render.

I have also tested both with the image as well as src attributes in the component and they both worked.

After I tried using the ../ to indicate the exact folder the jpg was located in I was given a usable error that allowed me to make the easy fix.

the computer was kind enough to give me a usable error message.

Solution 23:^[23]

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

Solution 24:^[24]

Well, you all know the answer to the question asked by now, but I am posting this answer to the question which most of you might be wondering after reading other answers:

Question: How the hell am I suppose to import 50 or 100 files:)

Answer: I suggest you make an api (.json) file and in that put the links to all the images and call the api. That's by far the best way to import files in bulk very easily, although it will take some time and knowledge, which If you don't already know.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Marcello B.
Solution 2	barbsan
Solution 3	Yasiru Padmasiri
Solution 4
Solution 5
Solution 6	Tomer Shetah
Solution 7	Martin Brisiak
Solution 8
Solution 9	Community
Solution 10
Solution 11	Kai Sheng Tung
Solution 12	Rahul Sarma
Solution 13	Community
Solution 14	Shem
Solution 15	Kiszuriwalilibori
Solution 16	dyedwiper
Solution 17	Divyesh Bhalani
Solution 18	Rubzen
Solution 19	Agilanbu
Solution 20
Solution 21	Tanzeel Ahmed
Solution 22	James F. Thomas
Solution 23	alexander.polomodov
Solution 24	Anuj Tanwar

'How do I reference a local image in React?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

First

Second

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]