Question

我正在为我的反应项目使用create-react-app。它已配置webpack以导入图像。我希望将多个图像（例如10个）从图像文件夹导入到组件中。最简单的方法是添加多个import语句，例如 -

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

当我们要导入多个文件时，上面的代码不是一个好的选择。有没有办法在循环中添加import语句？我尝试添加for循环，但是我无法修改变量Img0，Img1等（使用ES6``在将变量转换为字符串时没有工作）

Answer 1

您不能使用单个导入语句，但可以执行此操作：

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

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

<img src={images['0.png']} />

Source

Answer 2

我认为也许更好的主意是为图像文件夹使用 index 文件。

假设您具有以下结构：

并且您需要将所有图像导入到首页组件。您可以在 images 文件夹中轻松创建一个index.js文件，并使用 require 导出所有图像，如下所示：

export const Background = require('./bg/background.jpg');
export const First = require('./photos/first.jpg');
export const Second = require('./photos/second.jpg');
export const LinkedIn = require('./social/linkedin.png');

然后，您可以在组件上一次导入所有它们。

import {
  Background,
  First,
  Second,
  LinkedIn
} from '../../assets/images'

这将是您的最终文件夹结构：

希望有帮助！ ;）

Answer 3

我不确定这是否是一个好方法，但我也在寻找如何将多个图像导入到Components中。但是，我想像模块一样导入图像

图片文件夹

a.png
b.png
c.png
index.js

index.js

import a from "./a.png";
import b from "./b.png";
import c from "./c.png";
const images = {
    a,
    b,
    c
}
export default images;

导入图像的组件

import images from './images'; //Your images folder location

render（）中的用法

render(){
    return(
         <img src={images.a} />
    )
}

Answer 4

在 public 文件夹内创建一个图像文件夹，该文件夹可以在 src 文件夹外看到。

要调用组件中的图像，请执行以下操作：

src="images/imageName.format"

不要使用 src='../public'。它会显示错误。

React 会自动找到你提到的文件夹

Answer 5

对以上答案的某种混合方法，也许更清楚，至少对我而言是这样：

在文件夹中（例如，在/ src / components / app / assets / png / icons中）包含许多图像，我们创建了一个文件：“ index.js”，其内容如下：

 export const file1 = require("./IconRed_100x100.png");
 export const file2 = require("./IconSilver_100x100.png");
 export const file3 = require("./IconWhite_100x100.png");
 export const file4 = require("./IconBrown1_100x100.png");
 export const file5 = require("./IconBrown2_100x100.png");
 export const file6 = require("./IconGray_100x100.png");
 export const file7 = require("./IconMetallic_100x100.png");
 export const file8 = require("./IconMetallic_100x100.png");
 export const file9 = require("./IconMetallic_100x100.png");
 export const file10 = require("./IconMetallic_100x100.png");
 ...

（我们可以通过python脚本在应用程序外部创建此文件否则根本就没有意义，因为我们可以在需要图像的react-component内部实现多个导入线；确保我们需要知道要导入的文件内容和数量）

在需要这些图像的组件内部（在/ src / components / app / imageGallery /中，这里称为ImageGallery）：

 import * as ALL from "../assets/png/icons";

 const itemsToRender = [];
 for (let x in ALL) {
  console.log(x);
  itemsToRender.push(
    <div key={x} className="image-gallery-item">
     <img src={ALL[x]}></img>
    </div>
  );
 }

 function ImageGallery() {
 return (
   <>
    <div className="image-gallery">{itemsToRender}</div>
   </>
  );
 }

 export default ImageGallery;

然后，我们从名为ImageGallery的React组件中的“ / src / components / app / assets / png / icons”中渲染所有图像。

Answer 6

只需在公共文件夹中创建带有所有图像的img文件夹，然后您就可以

src =“ / img / logo_main.png”

https://www.youtube.com/watch?v=taMJct5oeoI

在react中导入多个文件

6 个答案: