image - 在 React.js 中加载本地镜像

Question

我已经使用 create-react-app 安装了 React。它安装得很好，但我试图在我的一个组件中加载图像(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/logo-dark@2x.png'>
            <img src='/var/www/html/react-demo/src/images/logo@2x.png' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
} 

如果我在 logo1 变量中将图像路径写为 src={require('./src/images/logo.png')} ，它会给出错误:

Failed to compile.

Error in ./src/Components/common/Header.js

Module not found: ./src/images/logo.png in /var/www/html/wistful/src/Components/common

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

Answer 1

如果您对创建 React App 有疑问，我鼓励您阅读其 User Guide .
它回答了这个问题以及您可能有的许多其他问题。

具体来说，要包含本地镜像，您有两种选择:

1. Use imports :

    // Assuming logo.png is in the same folder as JS file
    import logo from './logo.png';
   
    // ...later
    <img src={logo} alt="logo" />
   

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

缺点是，如果您有数百张图像，它可能会变得很麻烦，因为您不能拥有任意导入路径。

Use the public folder:

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

一般不推荐这种方法，但如果您有数百张图像并且一张一张地导入它们太麻烦，那么这种方法就很好了。缺点是您必须考虑缓存清除并自己留意移动或删除的文件。