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

如果我在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有疑问，我建议您阅读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 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

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

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

你的img标签中的

只是将它放入src：

<img src={myimage}...>

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

Answer 5

尝试创建div并将背景图像设置为所需图像，而不是使用img src =“”。

现在它对我有用。

示例：

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 6

在React.js最新版本v17.0.1中，我们不能要求必须导入本地图像。就像我们以前在= require（'../../ src / Assets / images / fruits.png'）之前所做的一样；现在我们必须像='.. / .. / src / Assets / images / fruits.png'导入水果一样导入它；

在React V17.0.1之前，我们可以使用require（../），它可以正常工作。

Answer 7

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

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

Answer 8

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

从'./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 9

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

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

Answer 10

首先，您需要在src目录中创建一个文件夹，然后放置所需的图像。

创建类似的文件夹结构

src->images->linechart.png

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

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

然后您需要在图像src中使用，如下所示。

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

Answer 11

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

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

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

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

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

在React.js中加载本地映像

11 个答案: