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

Posted 2023-02-21

【中文标题】无法在反应js中动态加载本地文件

【英文标题】：can't Load local files dynamically in react 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"]  />
        </div>
    );

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

【问题讨论】：

请分享代码

“本地”是指在您计算机的文件夹中？或者在您的 http 服务器的公共文件夹中？另外，您在浏览器开发者工具（控制台/网络）中看到了什么？

@karthik。我也分享代码。请检查。

显示控制台/网络调用。替换您上传的这张图片。它没有帮助

@Ricovitch 我将图像放在我的应用程序的文件夹中。

【参考方案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>
        )