Cannot display images in ReactJS?

Question

I have multiple images instead of importing each image in my content.js like this eg:

import myimg1 from './myimg1.png'

import myimg2 from './myimg2.png'

import myimg3 from './myimg3.png'

import myimg4 from './myimg4.png'

I have made images.js and then imported each image inside images.js and exported it so that I can access those images in content.js:

images.js:

import java from './images/java.png';
import neural from './images/neural.png';
import logo from './images/logo.png';
import dsa from './images/dsa.png';
import dl from './images/dl.jpeg';
import ds from './images/ds.jpeg';
import boy from './images/boy.jpeg';
import ml from './images/ml.jpeg';
import phone from './images/phone.png';

export default {
    java,
    logo,
    dsa,
    dl,
    ds,
    boy,
    ml,
    neural,
    phone
}

In content.js:

import React, { Component } from 'react';
import images from './images';

<img src={images.java} alt="Java" height="65" width="65"></img>

 <img src={images.neural} alt="Neural Network" height="65" width="65"></img>

I have made images folder which contains all images but I am not able to access the images and display it in content.js component.

@HuyVo I am using images.java in src="" check in the question — stone rock
– stone rock, Commented Mar 13, 2018 at 5:15
Have you tried to console.log images.java? The reason it doesn't render your image is because images.java is null. — Huy Vo
– Huy Vo, Commented Mar 13, 2018 at 6:14
@HuyVo I think you did not got my question I am importing all images from images folder inside images.js component and then exporting it to content.js but it is not working. — stone rock
– stone rock, Commented Mar 13, 2018 at 6:15
The reason it's not working is that you either imported or exported it the wrong way. — Huy Vo
– Huy Vo, Commented Mar 13, 2018 at 6:40

Bhuwan · Accepted Answer · 2018-03-13 09:15:24Z

1

See there is no class named images in your images.js, so

import images from './images'

will do nothing in content.js...So try this way

images.js

import java from './images/java.png';
import logo from './images/logo.png';

export {
    java,
    logo
}

content.js

import React, { Component } from 'react';
import { java, logo } from './images';

<img src={java} alt="" height="65" width="65">
<img src={logo} alt="" height="65" width="65">

answered Mar 13, 2018 at 9:15

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stone rock Over a year ago

Can you post the same answer here stackoverflow.com/questions/49229529/… I will upvote :)

Bhuwan Over a year ago

@stonerock Glad it helped you..!..See there is no need to post the same answer on same question...I think you should delete the previous question...

Kenry Sanchez · Accepted Answer · 2018-03-13 04:07:10Z

0

the export default is just used for when there is only one import function, in your case you should do export without default

export {
    java,
    logo,
    dsa,
    dl,
    ds,
    boy,
    ml,
    neural,
    phone
}

Then, in your file, you'd import all inside brackets

import { java, logo, dsa.. } from './yourFilePath'

answered Mar 13, 2018 at 4:07

Kenry Sanchez

1,7432 gold badges19 silver badges24 bronze badges

4 Comments

stone rock Over a year ago

See the screenshots: imgur.com/a/NkedO it is saying export default.

stone rock Over a year ago

I also made following changes in code see multiple screenshots: imgur.com/a/NlqNf

stone rock Over a year ago

I think you did not got my question I am importing all images from images folder inside images.js component and then exporting it to content.js but it is not working.

Kenry Sanchez Over a year ago

if you look at this answer, is the same answer than @Bhuwan

Collectives™ on Stack Overflow

Cannot display images in ReactJS?

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related