Question

在React上存储本地资产非常新。

我已经使用文件加载器和图像加载器配置webpack并在本地存储图像，但由于某种原因它似乎没有显示：

$users = arrayfile_to_array ($userdata);

webpack.config.js

import React, { Component } from 'react';
import WorkItem from './work-item';
import WorkItemsArray from './work-items-array';

class Work extends Component {
  render() {
    return (
      <div id='work'>
        <h1>Work</h1>
        <img src={require('../images/weatherImg.png')}/>
        <div id='portfolio'>
          {WorkItemsArray.map(({ url, img, title, description, github }) => {
            return (
              <WorkItem
                key={title}
                url={url}
                img={img}
                title={title}
                description={description}
                github={github}
              />
            );
          })}
        </div>
      </div>
    );
  }
}

export default Work;

FWIW，我根本没有收到任何错误，只是图片似乎没有加载。

任何帮助都非常感谢！

Answer 1

由于您认为没有任何错误，您有两种可能性：

图片不可见（可能因为高度和宽度都很小）
或者整个组件<Work />未呈现，或者甚至可以在不检测到的情况下进行渲染然后卸载。

对于第一个，强制图像大小或替换另一个图像：

    <img src={require('../images/weatherImg.png')} width="400" height="500"/>

对于第二个，添加componentDidMount和componentWillUnmount并进行调试，然后检查浏览器控制台：

  class Work extends Component {
    componentDidMount() {
      console.log(new Date(), ' Work is mouned ');
    }

    componentWillUnmount() {
      console.log(new Date(), ' Work will be killed ');
    }
    render() {
      //...
    }
  }

Answer 2

假设您将images文件夹放在public文件夹中。

尝试：

<img src={require(process.env.PUBLIC_URL + "/images/dog.png")}

对于其他人，如果您不使用webpack，请尝试：

<img src={process.env.PUBLIC_URL + "/images/dog.png"}

本地图像未在React中加载

2 个答案: