Question

我正在尝试加载我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 ..但我在这里做错了什么？

Answer 1

如果您想使用这样的文件路径，则需要在webpack配置中添加resolve属性，如此

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

例如，如果您的图片位于project/assets/images/并且您的网络包配置位于project/，那么在上面您将PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORY替换为assets。

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

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

无法将Image导入React App

1 个答案: