在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/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出错

未找到模块:/ 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" />
   

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

缺点是,如果您有数百张图片,可能会变得很麻烦,因为您无法拥有任意导入路径.

2. 使用公用文件夹:

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

通常不推荐这种方法,但如果您有数百张图像并且逐个导入它们太麻烦,那就太棒了.缺点是您必须考虑缓存清除并自己注意移动或删除的文件.

希望这可以帮助!

Answer 2

如果你想要像你一样加载图像local relative URL.React项目有一个默认public文件夹.你应该把你的images文件夹放在里面.它会工作.

Answer 3

在 React 或任何内部使用 Webpack 的 Javascript 模块中，如果 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，则不会渲染图像。

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

Answer 4

这里有很多很好的答案，还有比我自己更多的专家意见。但我只会分享我的经验和对我有用的东西。我对这样一个事实感到恼火：为了简单地包含图像而进行了如此多的工作。因此，这就是我所做的-

创建一个单独的组件（文件）myimages.jsx

import image1 from "../img/someimage.png";
import image2 from "../img/otherimage.png";

const ImageData=[image1,image2,image3]
export default ImageData;

然后，我将这个 ImageData 组件导入到文件（组件）中，就像使用图像一样。这样我就把一个组件变成了一个“文件夹”来获取我的所有图像。就像我说的，我不是专家，但这解决了我在 React 中无法快速导入图像的挫败感。

Answer 5

您可以通过不同的方法来实现此目的，这是一个示例：

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

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

<img src={myimage}...>

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

Answer 6

In React.js latest version v17.0.1, 
we can not require the local image we have to import it.

like we use to do before = require('../../src/Assets/images/fruits.png');

Now we have to import it like = 
import fruits from '../../src/Assets/images/fruits.png';

Before React V17.0.1 we can use require(../) and it is working fine.

Answer 7

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

image={require('./../uploads/temp.jpg')}