如何在反应中使用地图方法循环图像？

Question

我正在处理 React 项目，因为我有 App.js，它是 Child.js 的父级。在我的项目中，我有公用文件夹在其中我有资产文件夹，在这个文件夹中有图像文件夹，我有所有图像。我正在尝试循环所有这些图像。但它显示语法错误。

错误是这样显示的

./src/App/App.js 未找到模块：无法解析 src/App/App.js 中的“.public/assets/images”

这是 App.js

import React from 'react';
import './App.css';

function Employers() {
    return (
        <div className='container-fluid'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Main'>
                       <Child></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

这是 Child.js

import React from 'react';


function Child() {
    const imageShell = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'tweleve', 'thirteen', 'fourteen', 'fifteen', 'sixteen'];
    const loopImages = imageShell.map(function (images, i) {
        return <img src={require(".public/assets/images/" + images + ".jpg")} alt='imageLooping'></img>
    });
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='imageClassOne'>
                        {loopImages}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child

您认为我的疑问不清楚，请发表评论

Answer 1

我认为你有一个错字

你忘记了/

// forgot / here
require("./public/assets/images/" + images + ".jpg")