如何在反應中使用地圖方法循環圖像？

Question

我正在研究App.js項目，因為我有App.js是Child.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")