在react中导入多个文件

问题描述 投票：0回答：8

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

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';
...

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

javascript reactjs ecmascript-6
8个回答
58
投票

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

假设你有这样的结构：

您需要将所有图像导入到您的 HomePage 组件中。 您可以轻松地在 

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'

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

希望有帮助！ ;)

更新于2021年4月25日：

如果你想使用 ES6 命名导入：

图像/index.js：

import Background from './bg/background.jpg';
import First from './photos/first.jpg';
import Second from './photos/second.jpg';
import LinkedIn from './social/linkedin.png';

export {
  Background,
  First,
  Second,
  LinkedIn
};

减少名字重复

export { default as Background } from './bg/background.jpg';
export { default as First } from './photos/first.jpg';
export { default as Second } from './photos/second.jpg';
export { default as LinkedIn } from './social/linkedin.png';
42
投票

您不能使用单个导入语句，因为

import
和
export
的全部要点是可以静态地确定依赖关系，即无需执行代码，但您可以这样做： function importAll(r) { let images = {}; r.keys().map(item => { images[item.replace('./', '')] = r(item); }); return images; } const images = importAll(require.context('./images', false, '/\.png/')); <img src={images['0.png']} /> 

来源
。
    




      

      
      
      

      

        

          

            

              
8
投票

              
            

          

        

        




图像文件夹






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} />
    )
}


    



      

      
      
      

      

        

          

            

              
5
投票

              
            

          

        

        


function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));



images
是Module的一个对象。您可以通过 
images[index].default
 访问文件路径
    





      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        


src="/img/logo_main.png"


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

    




      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        


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


src="images/imageName.format"


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


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

    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        




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

     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");
 ...

    

    

    2. （我们可以通过 python 脚本在应用程序外部创建此文件
否则使用这种方法根本没有意义，因为我们可以在需要图像的反应组件内部实现多个导入行；当然我们需要知道我们要导入什么文件以及有多少文件）




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

     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;

    

    

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

    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


// images.js
const IMAGES = {
  apple: require('./apple.jpg').default,
  cherry: require('./cherry.jpg').default
}

export default IMAGES



// App.js
import IMAGES from "./images"

// USAGE OPTION 1 
const IMAGE = {...IMAGES}
<img src={IMAGE.apple} />


// USAGE OPTION 2
const { cherry } = IMAGES
<img src={cherry} />


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.