在 React.js 中加载本地图像

IT技术 image reactjs local
2021-04-16 01:42:23

我已经使用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/logo-dark@2x.png'>
            <img src='/var/www/html/react-demo/src/images/logo@2x.png' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
}

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

编译失败。

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

未找到module：/var/www/html/wistful/src/Components/common 中的 ./src/images/logo.png

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

6个回答

如果您对创建有任何疑问，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" />

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

希望这可以帮助！

我们真的需要process.env.PUBLIC_URL吗？它在没有process.env.PUBLIC_URL反应的情况下对我有用16.8.6
2021-06-09 01:42:23
如果图像在公共文件夹中，您可以直接提供 src='/logo.png'。
2021-06-19 01:42:23
谢谢丹·阿布拉莫夫！-- 我必须在此注意，React Dev Docs 建议使用 href="%PUBLIC_URL%/favicon.ico" -- 这对我根本不起作用。% 似乎是某种 Webpack 指令，但我没有使用 Webpack ......你的回答“process.env.PUBLIC_URL”对我来说非常有用——所以谢谢你！！
2021-06-20 01:42:23

如果你想用 a 加载图像，local relative URL就像你在做的那样。React 项目有一个默认public文件夹。你应该把你的images文件夹放在里面。它会起作用。

在此处输入图片说明

不建议将媒体放在public文件夹中
2021-05-30 01:42:23
我搜索了很多，但有非常棘手的解决方案可以提供间接的解决方法！但您的解决方案实际上是最好的答案，因为它是保存资产的正确位置。谢谢
2021-06-02 01:42:23
得到这个错误。“您试图导入位于项目 src/ 目录之外的 /img/sli.jpg。不支持 src/ 之外的相对导入。”
2021-06-07 01:42:23
这应该是关于如何在本地导入图像的公认答案
2021-06-13 01:42:23
不确定是否推荐，但如果您想动态显示图像，您可以使用此方法并<img src={"./" + imgName}/> 假设您将 imgName 作为参数传入，并且imgName=exampleImage.png，它将转到公共文件夹，找到该图像并显示它
2021-06-18 01:42:23

你有不同的方法来实现这一点，这是一个例子：

import myimage from './...' // wherever is it.

在您的 img 标签中，只需将其放入 src 中：

<img src={myimage}...>

你也可以在这里查看官方文档：https : //facebook.github.io/react-native/docs/image.html

是的，你只要求一个。但是当然，如​​果您有 1 或 100 个，则无论如何都需要分别调用。我使用编号文件，如 img-1、img-2.... 然后你可以循环遍历索引或类似的东西。示例： for (let i=1; i<15; i++) { let img[i] = ./images/img-${i}} 有了这个，你会得到一个 img[0,1,2,3... ，你可以以更好的方式管理
2021-05-22 01:42:23
谢谢阿道夫的回复，这很好，但我有大约 15 张图像要加载到同一页面上并定义每个图像，我认为这不是一个好方法。应该有其他方式。如果您有任何想法，请告诉我。
2021-05-31 01:42:23
谢谢，但这应该是最后一种方法；)
2021-06-18 01:42:23

在 React 或任何内部使用 Webpack 的 Javascript module中，如果 img 的 src 属性值以字符串格式作为路径给出，如下所示

e.g. <img src={'/src/images/logo.png'} /> or <img src='/src/images/logo.png' />

然后在构建过程中，构建的最终 HTML 页面包含 src='/src/images/logo.png'。该路径在构建期间不会被读取，而是在浏览器渲染期间被读取。在渲染时，如果在/src/images 目录中没有找到logo.png，则图像不会渲染。如果在浏览器中打开控制台，您可以看到图像的 404 错误。我相信您打算使用 ./src 目录而不是 /src 目录。在这种情况下，浏览器无法使用开发目录 ./src。当页面在浏览器中加载时，只有“public”目录中的文件可供浏览器使用。因此，相对路径 ./src 假定为 public/src 目录，如果在 public/src/images/ 目录中找不到 logo.png，则不会渲染图像。

所以，这个问题的解决方案要么是把你的图片放在 public 目录中并引用 public 目录中的相对路径，import或者require在 React 或任何 Javascript module中使用or关键字来通知 Webpack 在构建阶段读取这个路径并包含图像在最终的构建输出中。Dan Abramov 在他的回答中详细阐述了这两种方法的细节，请参考或使用链接：https : //create-react-app.dev/docs/adding-images-fonts-and-files/

为了将本地图像加载到您的 React.js 应用程序中，您需要require在媒体部分（如 或 Image 标签）中添加参数，如下所示：

image={require('./../uploads/temp.jpg')}
其它你可能感兴趣的问题
上一篇如何在 React 和 Typescript 中使用 refs 下一篇如何使 React CSS 导入组件范围？