在React中导入多张图片

Question

我正在尝试构建一个React应用程序，我需要使用多个图像。那么，我是否需要像这样导入我要使用的每个图像：

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

<img src={img} />

还有其他的方式吗？PS：我已经尝试了"require"，但是它也报错了：

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

没有输出

- KLMurphy

---

这取决于您的构建设置。您还可以直接使用相对链接来访问资产，假设它位于静态位置。例如："src='/img/img1.png'"，或者将其作为base64导入（但这也取决于构建工具）。 - Tim

这应该会有所帮助：https://dev59.com/GVkS5IYBdhLWcg3wV1dy - Zen Monkey

Answer 1

• 由于您正在使用 webpack，请查看require.context。 您应该能够将'/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';

附言：请参考我在类似问题上的被采纳的回答。

- koko-js478

Answer 2

如果您正在使用ES6+，您可以使用迭代器。就像下面这样。

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

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

- baymax

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>

- Miftah Classifieds

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

点击此处了解更多

- Md Kawsar islam Yeasin