在 React.js 中加载本地图像 [英] Load local images in React.js

问题描述

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

从'react'导入React；导出默认值 () =>{var logo1 = (<img//src=https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"src={'/src/images/logo.png'}alt=画布标志"/>);返回 (<div id="header-wrap"><div className="container clearfix"><div id="primary-menu-trigger"><i className="icon-reorder"></i>

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

);}

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

<块引用>

编译失败.

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

未找到模块:./src/images/logo.png in/var/www/html/wistful/src/Components/common

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

解决方案

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

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

1. 使用导入:

   //假设 logo.png 和 JS 文件在同一个文件夹从'./logo.png'导入标志；//...之后<img src={logo} alt=logo"/>

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

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

2. 使用公共文件夹:

   //假设 logo.png 在项目的 public/文件夹中<img src={process.env.PUBLIC_URL + '/logo.png'} alt=logo"/>

通常不推荐这种方法，但是如果您有数百张图像并且一张一张导入太麻烦的话，那就太好了.缺点是您必须自己考虑缓存破坏并注意移动或删除的文件.

希望这有帮助！

I have installed React using create-react-app. It installed fine, but I am trying to load an image in one of my components (Header.js, file path: src/components/common/Header.js) but it's not loading. Here is my code:

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>
  );
} 

If I write the image path as src={require('./src/images/logo.png')} in my logo1 variable, it gives the error:

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

Please help me solve this. Let me know what I am doing wrong here.

解决方案

If you have questions about creating React App I encourage you to read its User Guide.
It answers this and many other questions you may have.

Specifically, to include a local image you have two options:

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" />
   

This approach is great because all assets are handled by the build system and will get filenames with hashes in the production build. You’ll also get an error if the file is moved or deleted.

The downside is it can get cumbersome if you have hundreds of images because you can’t have arbitrary import paths.

2. Use the public folder:

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

This approach is generally not recommended, but it is great if you have hundreds of images and importing them one by one is too much hassle. The downside is that you have to think about cache busting and watch out for moved or deleted files yourself.

Hope this helps!

这篇关于在 React.js 中加载本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！