Question

我是编程新手，对React也很新。我正在尝试显示来自data.js文件的图像。我正在获取数据，但没有图像。我的console.log正确显示图像路径。我知道我的路径没问题，因为我已尝试导入图像，并且效果很好。

我试图创建一个.env文件来提及NODE_PATH = src，所以我可以使用绝对路径，但这也不起作用，我认为这是处理绝对路径的不赞成使用的方法。我也尝试过放置一些来自google的随机url图像，但是它也不起作用。那使我认为我的问题与路径无关。

// My app.js file 

import React from 'react';
import GetImages from './components/ImagesTest/getImages';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1 className="header">Local Storage</h1>
      <GetImages/>
    </div>
  );
}

export default App;


// My class file 
import React, { Component } from "react";
import Data from './data';


class GetImages extends Component{

    constructor(props){
        super(props);
        this.state = {
            Data: Data
        };
    }

    render(){
        const {Data} = this.state;

        return(
            <div>
            {
                 Data.map(data=>(

                     <div>
                        { console.log(data.src) }
                        <img src= {data.src} alt = {data.alt}></img>
                        <p>{data.note}</p>
                        <p>{data.w}</p>
                        <p>{data.h}</p>
                     </div>

                ))
            }

            </div>
        )    
    }
}

export default GetImages;


// My data.js file

const pictures = [
    {
        "id": "4",
        "title": "the_cats",
        "place": "",
        "note": "This a cat picture",
        "datePhoto": "2018",
        "w": "5312",
        "h": "2988",
        "src": "/../cat1.jpg",
        "alt" : "cat image",
        "lblDate": "Date : ",
        "lblPlace": "Place : ",
        "lblNote": "Note : "
    }
]

export default pictures;

很抱歉，这个问题很简单。任何帮助都很好，因为我在这里迷失了方向。非常感谢！！

Answer 1

您可以尝试此webpack template作为入门工具。

文件加载部分https://blog.cloudboost.io/webpack-for-beginners-part-1-bf8d65e58ecf解释了filer-loader用于提供图像文件。

如何在React中显示来自js文件的图像？

1 个答案: