Reactjs本地图像未加载答案

【问题标题】：Reactjs local image not loadingReactjs本地图像未加载
【发布时间】：2017-06-18 00:26:33
【问题描述】：

我在我的 reactjs 文件中本地加载图像时遇到问题。任何帮助都是极好的。谢谢

编译失败 ./src/components/pages/home.js

找不到模块：无法解析“C:\Users\tcmar\Documents\ThomasWebsite\mywebsite\src\components\pages”中的“../Assets/images/Thomas-overlay3.jpg”

此错误发生在构建期间，无法消除。

我的代码：

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div className="container">
        <div className="hero-image">
          <img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" />
        </div>
        <div className="hero-text">
          Hello, My Name is <span>Thomas</span>
        </div>
      </div>
    );
  }
}

export default Home;

【问题讨论】：

你想import image from 'some-image.jpg' 吗？你能粘贴你的代码吗？
我正在尝试从我的资产/图像文件夹中导入图像
您的期望是什么？
我只是想从这个文件夹本地加载我的图像。我正在尝试建立自己的静态网站

标签： reactjs

【解决方案1】：

您的资产应该放在某个由服务器提供的public/ 文件夹中。

那么你可以参考实际资源：

...
<img src="/assets/my-image.jpg" />
...

或者，您可以使用 webpacks file-loader 并像这样加载它：

<img src={require("file-loader!./file.png")} />

但是，如果这是您想要的，这将自动加载文件并在公用文件夹中发出副本。

【讨论】：

就是这样！谢谢...这么快的问题为什么我不能在我的 src 文件夹中使用图像文件夹？
因为您的 src 文件夹不是公开的，请查看我的编辑，您可以使用 file-loader 从 src 加载它，这将创建公开文件并返回正确的路径。
甜蜜！感谢您的帮助！