Import multiple images on React

user_11527789 0
Viewed 5423

I'm trying to build a react app and I have to use multiple images ,now do i have to import every images i'll use like:

import image from '/img/img1.png';

<img src={img} />

or is there another way to it???,

PS: I've tried "require" and it gave an error also :

<img src={windows.location.origin +'/img/img1.png'}/>

gives no output

jsx create-react-app reactjs javascript
4 Answers
  • Since you are using webpack, have a look at require.context . You should be able to import all png files in '/img' to images variable. Then you can use image by images["img(n).png"].
function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('/img', false, '/\.jpg/'));

<img src={images["img1.png"]} />
  • In another way, you can use a file dedicated to these imports :

images.js :

import img1 from "/img/img1.jpg"
import img2 from "/img/img2.jpg"
import img3 from "/img/img3.jpg"
.
.
.
import img(n) from "/img/img(n).jpg"

export default [
    img1,
    img2,
    ...
];

Then import this array in one line in other files :

import imgs from './images';

P.S. please refer my accepted answer on similar question.

user_142678500

If you're using ES6+, you can use iteral. Something like below.

const imageNames = ['img1.jpg', 'img2.jpg', 'img3.jpg']

render() {
  ...
  imageNames.map(image => <img src={`/img/${image}`}></img>)
  ...
}
user_105857080

instead of using array [] as mentioned @koko-js478 export js like this:

icons.js:

import animals_for_sale from '../Assets/icons/animals_for_sale.svg';
import baby_toys from '../Assets/icons/baby_toys.svg';
import cars_and_vehicles from '../Assets/icons/cars_and_vehicles.svg';
import contact_us from '../Assets/icons/contact_us.svg';
import devices from '../Assets/icons/devices.svg';
import electronic_appliances from '../Assets/icons/electronic_appliances.svg';
import fashion from '../Assets/icons/fashion.svg';
import home_and_garden from '../Assets/icons/home_and_garden.svg';
import homepage_icon from '../Assets/icons/homepage_icon.svg';
import login from '../Assets/icons/login.svg';
import my_account from '../Assets/icons/my_account.svg';
import privacy_policy from '../Assets/icons/privacy_policy.svg';
import real_estate_for_rent from '../Assets/icons/real_estate_for_rent.svg';
import real_estate from '../Assets/icons/real_estate.svg';
import services from '../Assets/icons/services.svg';
import use_app from '../Assets/icons/use_app.svg';

export default {
    'animals_for_sale':animals_for_sale,
    'baby_toys':baby_toys,
    'cars_and_vehicles':cars_and_vehicles,
    'contact_us':contact_us,
    'devices':devices,
    'electronic_appliances':electronic_appliances,
    'fashion':fashion,
    'home_and_garden':home_and_garden,
    'homepage_icon':homepage_icon,
    'login':login,
    'my_account':my_account,
    'privacy_policy':privacy_policy,
    'real_estate_for_rent':real_estate_for_rent,
    'real_estate':real_estate,
    'services' :services,
    'use_app':use_app
};

and then import a hole json like this:

import icons from './icons';

after that you can use every single icon like this:

<li><a className='dropdown-item'><img src={icons.cars_and_vehicles} className="img-section"/>Voitures et véhicules &raquo;</a>
user_114153460

maybe this can help you

function importAll(r) {
 let images = {};
  r.keys().forEach((item, index) => { images[item.replace('./', '')] = r(item); });
 return images
}
const images = importAll(require.context('../assets', false, /\.(png|jpe?g|svg)$/));

know more from here

user_171336620
Related