在 React.js 中加载本地图像答案

【问题标题】：Load local images in React.js在 React.js 中加载本地图像
【发布时间】：2017-10-24 14:16:37
【问题描述】：

我已经使用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')}，则会出现错误：

编译失败。

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

找不到模块：/var/www/html/wistful/src/Components/common 中的 ./src/images/logo.png

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

【问题讨论】：

标签： image reactjs local

【解决方案1】：

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

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

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

<img src={myimage}...>

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

【讨论】：

感谢 Adolfo 的回复，它很好，但我有大约 15 张图片要加载到同一页面上并定义每张图片我认为这不是一个好方法。应该有其他方法。如果您有任何想法，请告诉我。
是的，你只想要一个。但是当然，如果您有 1 或 100 个，则无论如何都需要调用每个。我使用像img-1，img-2这样的编号文件......然后你可以循环通过索引或类似的东西。示例： for (let i=1; i./images/img-${i} } 这样你就可以得到一个 img[0,1,2,3...方式
谢谢，但这应该是最后的方法；）

【解决方案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" />

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

希望这会有所帮助！

【讨论】：

我们真的需要process.env.PUBLIC_URL吗？在没有process.env.PUBLIC_URL 的情况下对我有用 16.8.6
谢谢丹·阿布拉莫夫！ --我必须在这里注意，React Dev Docs 建议使用 href="%PUBLIC_URL%/favicon.ico" -- 这对我根本不起作用。 % 似乎是某种 Webpack 指令，但我没有使用 Webpack ......你的回答“process.env.PUBLIC_URL”对我来说非常有效——所以谢谢！！
如果图片在公共文件夹中，您可以直接提供src='/logo.png'。
@JacobNelson 如果您托管的 React 应用程序不在您网站的根目录下，环境变量会很有帮助，例如你的反应应用程序的基础是https://example.com/react/。

【解决方案3】：

如果您想加载带有local relative URL 的图像，就像您正在做的那样。 React 项目有一个默认的 public 文件夹。您应该将 images 文件夹放入其中。它会起作用的。

【讨论】：

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

【解决方案4】：

不要使用 img src=""，而是尝试创建一个 div 并将 background-image 设置为您想要的图像。

现在它对我有用。

示例：

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

【讨论】：

为了清楚起见，请提供您的解决方案的代码示例

【解决方案5】：

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

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

【讨论】：

【解决方案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)

【讨论】：

请不要只发布代码作为答案，而是要说明您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。

【解决方案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 对浏览器不可用。当页面在浏览器中加载时，只有“公共”目录中的文件可供浏览器使用。因此，假设相对路径 ./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/

【讨论】：

【解决方案8】：

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

公用文件夹中的文件未经过缩小或后处理，
您不能对图像使用散列名称（需要在 webpack 配置中设置），如果这样做，则必须一次又一次地更改名称，
在运行时（编译）找不到文件，导致客户端出现 404 错误。

【讨论】：

【解决方案9】：

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

创建一个类似的文件夹结构

src->images->linechart.png

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

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

那么你需要像下面这样在图片src中使用。

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

【讨论】：

【解决方案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(../) 并且它工作正常。

【讨论】：

【解决方案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 变成了一个“文件夹”来获取我的所有图像。就像我说的那样，不是专家，但这解决了我在 React 中无法快速导入图像的挫败感。

【讨论】：