Question

我想在我的应用程序中动态加载一些本地图像。我有一个像

这样的记录的json

{名称：image12，海报：'image1.jpg'}，{名称：image13，海报：'image2.jpg'}

我有一个包含许多图像的文件夹，例如'image1.jpg'，'image2.jpg'，'image3.jpg'。当我尝试渲染我放置的json记录时 <img src={'./image/image1.jpg'}/>，但无法正常工作。

[![import React from 'react';

const Poster = (props) => {
    return(
        <div className="individual-poster">
            <h2>{props.postData.name}</h2>
            <img src={'./Slices/'+props.postData["poster"]} width="100px" height="100px"/>
        </div>
    );
}

图像甚至没有在源列表中列出。

Answer 1

如果您知道路径图像，则您要映射的json对象必须与此类似：

const obj = [
    {"name":"Chrysanthemum","path":require('./Chrysanthemum.jpg')}, //this will work
    {"name":"Desert","path":'./Desert.jpg'}, //will not work
]

require您的图像路径必须在内部，需要方法。就像考虑将json obj文件默认导出到与文件名imagesJson的同一目录中一样。

import imagArray from './images';

像这样的地图

imagArray.map((m)=>{
            return <div>
               {m.name}
                 <img src={m.path}/>
            </div>
     })

Answer 2

如果您创建了自己的应用程序，然后使用create-react-app进行了反应，则可以导入图像变量，以后再使用它多次。

import logo from './logo.png' // relative path to image 

class App extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

或者您可以直接指定图像相对路径。

<img src ="http://localhost:3000/img/foo.png" />
<img src="/details/img/bar.png" />

在您要使用数组图像的问题中

const images = [{
    name: 'image12',
    path: 'image1.jpg'
}, {
    name: 'image13',
    path: 'image2.jpg'
}];

class App extends Component {
    render() {
        return (
        <div>
             <img src={logo} alt={"logo"}/>
            {images.map((img) => <img src={img.post} alt={img.name} />)}
        </div>
        )
    }
}

无法在React JS中动态加载本地文件

2 个答案: