在React.js中加载本地图像

Question

我已经使用安装了React create-react- app。它安装得很好，但是我试图将图像加载到我的一个组件（Header.js，文件路径：）中，src/components/common/Header.js但是没有加载。这是我的代码：

import React from 'react';

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>

        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/[e-mail]'>
            <img src='/var/www/html/react-demo/src/images/[e-mail]' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
}

如果我src={require('./src/images/logo.png')}在logo1变量中写入图像路径，则会出现错误：

编译失败。

./src/Components/common/Header.js中的错误

找不到模块：/ var / www / html / wistful / src / Components /
common中的./src/images/logo.png

请帮我解决这个问题。让我知道我在这里做错了。

Answer 1

如果您对创建有任何疑问，React App建议您阅读其用户指南。
它回答了这个问题以及您可能遇到的许多其他问题。

具体来说，要包含本地图像，您有两个选择：

1. 使用进口：

        // Assuming logo.png is in the same folder as JS file
    import logo from './logo.png';

    // ...later
    <img src={logo} alt="logo" />

这种方法很棒，因为所有资产都由构建系统处理，并且将在生产构建中获取带有哈希的文件名。如果文件被移动或删除，您也会收到错误消息。

不利的一面是，如果您有数百张图片，可能会很麻烦，因为您不能拥有任意的导入路径。

1. 使用公用文件夹：

        // Assuming logo.png is in public/ folder of your project
    <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

通常不建议使用这种方法，但是如果您有数百张图像，并且一次导入一个图像太麻烦了，那就太好了。缺点是您必须考虑缓存清除，并自己注意移动或删除的文件。

希望这可以帮助！