在 React 上导入多个图像

Question

我正在尝试构建一个反应应用程序，我必须使用多个图像，现在我是否必须导入我将使用的每个图像，例如：

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

<img src={img} />

还是有别的办法？？？，

PS：我试过“require”，它也给出了一个错误：

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

没有给出 output

Answer 1

• 由于您使用的是 webpack，请查看require.context 。 您应该能够将'/img'中'/img'所有 png 文件导入到images变量中。 然后您可以通过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"]} />

• 换句话说，您可以使用专用于这些导入的文件：

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,
    ...
];

然后在其他文件的一行中导入这个数组：

import imgs from './images';

PS请参考我在类似问题上接受的答案。

Answer 2

如果您使用的是 ES6+，则可以使用 iteral。 像下面这样的东西。

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

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

Answer 3

而不是像@koko-js478提到的那样使用数组 [] 导出 js：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

};

然后像这样导入一个孔 json ：

import icons from './icons';

之后，您可以像这样使用每个图标：

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

Answer 4

也许这可以帮助你

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)$/));

从这里了解更多