在 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

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

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

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

<img src={myimage}...>

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

Answer 2

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

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

Use imports:

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

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

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

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

Use the public folder:

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

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

希望对您有所帮助！

Answer 3

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

Answer 4

不要使用 img src=""，而是尝试创建 div 并将背景图像设置为您想要的图像。

现在它对我有用。

示例：

App.js

import React, { Component } from 'react';
import './App.css';



class App extends Component {

  render() {
    return (
      <div>
        <div className="myImage"> </div>
      </div>
    );
  }
}

export default App;

App.css

.myImage {
  width: 60px;
  height: 60px;
  background-image: url("./icons/add-circle.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

Answer 5

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

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

Answer 6

我们不需要 base64，只需提供您的图片路径和尺寸，如下所示。

import Logo from './Logo.png' //本地路径

        var doc=new jsPDF("p", "mm", "a4");
        var img = new Image();
        img.src =Logo;
        doc.addImage(img, 'png', 10, 78, 12, 15)

Answer 7

在 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 目录，如果 logo.png 在 public/src/images/ 目录中未找到，则不会渲染图像。

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

Answer 8

最好的方法是在js文件中导入图片并使用它。在 public 文件夹中添加图像有一些缺点：

public 文件夹中的文件未被缩小或 post 处理，
你不能对图片使用散列名称（需要在webpack配置中设置），如果你这样做那么你必须一次又一次地更改名称，
运行时（编译）找不到文件，导致客户端404错误

Answer 9

首先，您需要在src目录下创建一个文件夹，然后放入您想要的图片。

创建类似

的文件夹结构

src->images->linechart.png

然后将这些图像导入 JSX 文件

import linechart from './../../images/linechart.png';

然后你需要像下面这样在图像 src 中使用。

<img src={linechart} alt="piechart" height="400px" width="400px"></img>

Answer 10

在React.js最新版本v17.0.1中，我们可以不要求我们必须导入它的本地图像。就像我们以前做的一样 = require('../../src/Assets/images/fruits.png'); 现在我们必须导入它 = import fruits from '../../src/Assets/images/fruits.png';

在 React V17.0.1 之前我们可以使用 require(../) 并且它工作正常。

Answer 11

这里有很多好的答案和比我自己更多的专家意见。但我只会分享我的经验以及对我有用的方法。我很恼火，因为有这么多东西只是为了简单地包含图像。因此这就是我所做的-

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

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

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

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

在 React.js 中加载本地图像

Load local images in React.js

image

local

reactjs