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

Posted 2023-02-21

【中文标题】如何在反应中显示图像文件夹中的每个图像

【英文标题】：How to display every image inside an image folder in react

【发布时间】：2019-10-14 07:28:21

【问题描述】：

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

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

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

图标.jsx

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


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

【问题讨论】：

图像是否以特定顺序命名或具有与之关联的模式？

@Richard 到目前为止你尝试过什么？

@SatejS 是的，他们有特定的模式。它们具有命名约定，例如“轮廓”、“尺寸”等

假设有一些非常严格的命名约定和格式，例如“outline-250”、“outline-300”、“sizes-200”，您的渲染循环可能会随着数字。

可能重复 = > ***.com/questions/53762640/…

【参考方案1】：

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

在 webpack 的某些方面，您需要在 '../../Images/Icons' 文件夹中的 index.js 文件，导出所有图标以便轻松导入其他位置。

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

【参考方案2】：

我有同样的情况，我必须从文件夹中选择 images 或 SVGs 并显示它。以下是我遵循的过程：

文件夹结构

  -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 ></img>
                    )
              
          </div>
        )
    

它对我有用；试试看吧。

【讨论】：

如果我的回答完全符合您的要求，请将其标记为回答

【参考方案3】：

如果你环顾四周，你可能已经看到了这个

export default function getImagePaths(directory) 
  let images = [];
  directory.keys().map((item, index) => images.push(item.replace("./", "")));
  return images;

此函数返回所需目录中每张照片的路径数组。使用它，我在名为 gallery

的文件夹中创建了一个

index.js

文件

const directory = require.context("../", false, /\.(png|jpe?g|svg)$/);
let imagePaths = getImagePaths(directory);

let images = [];
imagePaths.map((path) => images.push(require("../" + path)));

export default images

此索引文件使用从 getImagePaths 返回的字符串数组，并使用imagePaths.map((path) => images.push(require("../"+path))); 创建自己的数组 然后从 index.js 导出该数组并在页面中使用。

这是一个正在使用的sn-p。

import images from "../assets/images/gallery";
import "../assets/css/gallery.css";

const Gallery = () => 
  return (
    <div id="gallery-container">
      images.map((img, index) => (
        <div>
          <img key=index src=img alt=img />
        </div>
      ))
    </div>
  );
;