Question

我的create-react-app项目中有一个包含一堆图像的图像文件夹。我想在组件中显示每个图像。

├── Components
│   ├── Icons
│   │   ├── Icon.jsx (I want to display every single icon)
│  
│  
├── Images
│   ├── Icons
│   │   ├── ... (over 100 SVG icons)

在我的.jsx文件中，我想遍历每个图像/图标并显示它。

Icons.jsx

import React, { Component } from 'react';
import Icons from '../../Images/Icons';


class Icons extends Component {
  render() {
    return (
      //Loop over every icon and display it
    );
  }
}

Answer 1

在相同的情况下，我必须从文件夹中选择images或SVG，然后显示它。以下是我遵循的过程：

文件夹结构

  -public
   -src
     |-component
     |-images
        |-1.png
        |-2.png
        |-3.png
        .
        .
        |-some x number.png

在component中您想在那里消费image的地方，您必须这样做：

export default App;
import React from 'react';
import ReactDOM from 'react-dom';
var listOfImages =[];

class App extends React.Component{
    importAll(r) {
        return r.keys().map(r);
    }
    componentWillMount() {
        listOfImages = this.importAll(require.context('./images/', false, /\.(png|jpe?g|svg)$/));
    }
    render(){
        return(
          <div>
              {
                    listOfImages.map(
                      (image, index) =>    <img key={index} src={image} alt="info"></img>
                    )
              }
          </div>
        )
    }
}

它为我工作；试试看。

Answer 2

我来看看https://github.com/react-icons/react-icons/blob/master/packages/react-icons/scripts/build.js。作者采用了svg的许多文件夹，并将它们转换为可用的组件。如果您将该脚本改型到您的应用中，那么这是一个可重复的工作流程，也应该适用于svg图标包。

在某些情况下，用于Webpack，您需要在index.js文件夹中放置一个'../../Images/Icons'文件，该文件可以导出所有图标，以便轻松导入其他地方。

您可以执行一些快速而肮脏的bash技巧（例如lsa），并使用编辑器（多光标/查找并替换）来获取文件名并一次创建该index.js文件。然后添加它不会花费很多精力。但是最好使用可以根据需要从svgs文件夹生成“导出文件”的脚本。

如何在React中显示图像文件夹中的每个图像

2 个答案: