无法在反应js中动态加载本地文件答案

【问题标题】：can't Load local files dynamically in react js无法在反应js中动态加载本地文件
【发布时间】：2019-01-14 03:19:14
【问题描述】：

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

之类记录的 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>
    );
}

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

【问题讨论】：

请分享代码
“本地”是指在您计算机的文件夹中？或者在您的 http 服务器的公共文件夹中？另外，您在浏览器开发者工具（控制台/网络）中看到了什么？
@karthik。我也分享代码。请检查。
显示控制台/网络调用。替换您上传的这张图片。它没有帮助
@Ricovitch 我将图像放在我的应用程序的文件夹中。

标签： reactjs

【解决方案1】：

如果您知道路径图像，那么您尝试映射的 json 对象一定与此类似：

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

require 你的图片路径必须在 require mehtod 中。使用类似于考虑默认导出的 json obj 文件在文件名 imagesJson 的同一目录中。

import imagArray from './images';

这样的地图

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

【讨论】：

【解决方案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>
        )
    }
}

【讨论】：