Display images in React using JSX without import

Question

The problem I faced is with the img tag. When a single image is concerned, The below code loads the image:

import image1 from './images/image1.jpg';
<img src={image1} />

But the below code doesn't load:

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

I need to loop through json, something like:

[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]

Plus, display each of them as image with name as footer. Looping is fine but the images doesn't load. It is not actually possible for me to import every images to add. I don't use anything other than JSX as of now. Please favour.

In your browser network tab, what does it _think_ the URLS of the images are? — Paul Collingwood, Mar 03 '17 at 13:27

score 78 · Answer 1 · answered Mar 03 '17 at 13:29

78

You need to require the file like so:

<img src={ require('./images/image1.jpg') } />

answered Mar 03 '17 at 13:29

Win

5,498
2
15
20

2

eslint is complaining about this says "Unexpected require(). (global-require)" Also says "Calls to require() should use string literals (import/no-dynamic-require)" – pixelwiz Dec 08 '17 at 01:11
@pixelwiz If you have enabled that setting replace the ' with backticks `. – Win Dec 09 '17 at 17:38
I actually had to make a separate file that imports all the images, then I could import that file and reference the images. Feels kinda crazy but now React, Webpack and ESLint seem happy. – pixelwiz Dec 11 '17 at 01:03

score 25 · Answer 2 · answered Nov 07 '20 at 11:07

25

We could use require instead of import statment. Like ,

<img src={require("folder/image.format")} alt="image not found" />

But if you run it , it will show image not found!!!

We could simply solve it by changing the statment by adding .default

let image = require("folder/image.format");

<img src={image.default} alt="image not found" />

answered Nov 07 '20 at 11:07

VELDAS R DURAI

301
4
9

1

Funny. After 3 years of this question, I find this specific comment helpful. I needed that `default` for some reason. – Saehun Sean Oh Dec 18 '20 at 09:37
1

Helped me too, the original answer did compile but it dd not show the requested Image. Thank you – eckad158 Dec 18 '20 at 10:25

score 22 · Accepted Answer · answered Mar 03 '17 at 13:32

22

require is used for static "imports", so you just need to change your imports.

Example:

var imageName = require('./images/image1.jpg')
<img src={imageName} />

answered Mar 03 '17 at 13:32

Robsonsjre

1,586
11
17

you are welcome :) You can accept my answer as solving your problem, so it helps stackoverflow community – Robsonsjre Mar 03 '17 at 13:36
I have been trying.But i get a notification like I can accept after 4 mins currently. – Gayathri Mar 03 '17 at 13:38
You are right! it really has that 'waiting times'..haha – Robsonsjre Mar 03 '17 at 13:54

score 1 · Answer 4 · answered Jun 10 '18 at 18:09

1

I just tried this, it works!

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}

answered Jun 10 '18 at 18:09

Daniel C. Deng

1,573
13
8

What's the point? Why cant one just use `require()`? – Sid110307 Apr 07 '22 at 16:02

score 1 · Answer 5 · answered Nov 06 '20 at 21:41

The suggested answers do not appear to work any more. Here is a code fragment that highlight the issue.

import React from 'react';
import importImg from '../images/img.jpg';
export default function ImgTest(){
return(<>
<img src={importImg} alt='import'></img><br/>
<img src={require('../images/img.jpg')} alt='require function fails'></img><br/>
</>)
}

When this code is rendered, the following occurs.

1st displays the image - it the expected result

2nd displays the alt "require function fails" - is not the expected result

score 0 · Answer 6 · answered Jan 20 '21 at 17:08

0

Its because, you've put your images folder in src folder. So you should import or require it. You can directly put the source of image if it's placed in public folder without importing or using require, like this.

<img src='/images/image1.jpg' />

answered Jan 20 '21 at 17:08

Alfie

162
1
6

Display images in React using JSX without import

6 Answers6

Linked

Related