CODEWITHSUNDEEP
javascriptreactjs
stone rock
stone rock

Reputation: 1953

Cannot display images in ReactJS?

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.

enter image description here

Upvotes: 1

Views: 866

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

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">

Upvotes: 1

Kenry Sanchez
Kenry Sanchez

Reputation: 1743

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'

Upvotes: 0

Related Questions