将图像导入 React App 时遇到问题答案

【问题标题】：Having trouble importing Image into React App将图像导入 React App 时遇到问题
【发布时间】：2017-09-17 22:22:20
【问题描述】：

我正在尝试加载包含在我的src 文件夹中的图像文件。我正在将其加载到App.js，如下所示：

import React, { Component } from 'react';
import './App.css';
import logo from 'images/logo.png';

class App extends Component {
  render() {
    return (
        <header>
            <img src={logo} alt={"logo"}/>
        </header>
    );
  }
}

export default App;

很遗憾，我收到了这个错误：

./src/App.js
Module not found: Can't resolve 'logo.png' in '/src'

我用这个 Stack Overflow 答案得到了这段代码：https://stackoverflow.com/a/35454832/7386637 ..但是我在这里做错了什么？

【问题讨论】：

尝试使用相对链接（./images/logo.png，如果您的图片文件夹与App.js在同一文件夹中）
做到了。谢谢！
不客气！

标签： reactjs

【解决方案1】：

如果你想使用这样的文件路径，你需要在你的 webpack 配置中添加一个resolve 属性，就像这样

  resolve: {
    modules: [path.resolve(__dirname, 'PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORY')]
  },

例如，如果您的图片位于 project/assets/images/ 中，而您的 webpack 配置位于 project/ 中，那么在上面的代码中，您可以将 PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORY 替换为 assets。

然后使用import logo from 'images/logo.png'; 就可以了。（提醒您需要重新启动您的开发服务器才能使 webpack 配置中的更改生效）

否则，如上所述，相对路径将正常工作。

【讨论】：