Question

我正在构建一个小型反应应用程序，我的本地图像不会加载。像placehold.it/200x200这样的图像加载。我想也许它可能是服务器的东西？ github上的完整来源。

这是我的App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

和server.js：

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

Answer 1

使用Webpack时，您需要require图像才能让Webpack处理它们，这可以解释为什么外部图像加载而内部图像不加载，因此您需要使用<img src={"/images/resto.png"} />代替<img src={require('/images/image-name.png')} />使用每个图像的正确图像名称替换image-name.png。这样Webpack就能够处理和替换源img。

Answer 2

另一种方法：

首先，安装以下模块：url-loader，file-loader

使用npm：npm install --save-dev url-loader file-loader

接下来，将其添加到您的Webpack配置：

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit：内联文件的字节限制为数据网址

您需要安装两个模块：url-loader和file-loader

最后，你可以这样做：

<img src={require('./my-path/images/my-image.png')}/>

您可以在此处进一步调查这些装载机：

url-loader：https://www.npmjs.com/package/url-loader

file-loader：https://www.npmjs.com/package/file-loader

Answer 3

我开始使用create-react-app构建我的应用程序（请参阅“创建新应用程序”选项卡）。它附带的README.md给出了这个例子：

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

这对我来说非常合适。这是一个link to the master doc for that README，它解释了（摘录）：

...您可以直接在JavaScript模块中导入文件。这告诉Webpack   将该文件包含在捆绑包中。与CSS导入不同，导入   file为您提供字符串值。此值是您可以使用的最终路径   您的代码中的引用，例如作为图像的src属性或   链接到PDF的href。

要减少对服务器的请求数，请导入图像   少于10,000个字节返回数据URI而不是路径。这个   适用于以下文件扩展名：bmp，gif，jpg，jpeg和   PNG ...

Answer 4

实际上，我想发表评论，但尚未获得我的授权。这就是为什么那个假装不是下一个答案的原因。

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
// Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

我想继续走这条路。当一个人可以简单地插入图片时，这种操作就很顺利。就我而言，这稍微复杂一点：我必须将其映射成几张图片。到目前为止，我发现唯一可行的方法如下

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/>

所以，我的问题是是否有更简单的方法来处理这些图像？不用说，在更一般的情况下，必须逐字导入的文件数量可能很大，并且对象中的键数量也是如此。（该代码中的对象明确涉及按名称引用-其键）在我的情况下，与需求相关的程序没有起作用-装载机在安装过程中产生了奇怪的错误，并且没有任何工作痕迹。并且要求本身也没有起作用。

Answer 5

通过做一个简单的导入，你可以在 React 中访问图像

import logo from "../images/logo.png";
<img src={logo}/>

一切都解决了！只是一个简单的修复 =)

Answer 6

我也想补充@Hawkeye Parker和@Kiszuriwalilibori的答案：

如文档here所述，通常最好根据需要导入图像。

但是，由于以下文档中的建议，我需要动态加载许多文件，这导致我将图像放入公用文件夹（also stated in the README）：

通常，我们建议从JavaScript导入样式表，图像和字体。公用文件夹可作为许多不常见情况的解决方法：


您需要在构建输出中使用特定名称的文件，例如manifest.webmanifest。

您有成千上万张图片，需要动态引用它们的路径。

您想在捆绑的代码之外包含一个小脚本，例如，speed.js。

某些库可能与Webpack不兼容，您别无选择，只能将其包括为标签。

希望对别人有帮助！如果需要清除其中的任何内容，请给我留言。

Answer 7

我正在开发一个使用SSR的项目，现在我想根据此处的一些答案分享我的解决方案。

我的目标是预加载图片以在Internet连接离线时显示它。（这可能不是最佳做法，但是因为它对我有用，所以现在还可以）仅供参考，我也在该项目中使用ReactHooks。

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

要使用图片，我会这样写

<img src="/assets/images/error-review-failed.jpg" />

Answer 8

您必须先导入图像然后再使用它。它对我有用。


import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}

Answer 9

这是我的做法：如果您使用 npx create-react-app 来设置您的反应，则需要从要使用它的组件中的文件夹中导入图像。这只是您从文件夹中导入其他模块的方式。

所以，你需要写：

import myImage from './imageFolder/imageName'

然后在你的 JSX 中，你可以有这样的东西：<image src = {myImage} />

在下面的屏幕截图中看到它：

Answer 10

我遇到了同样的问题，我发现问题在于我的图像的位置。与其将它们保存到 src 文件夹中，不如将它们存储在 public 目录中并可以直接访问。

点赞。

Answer 11

在react中加载本地图像的最佳方法如下

例如，如下所示，将所有图像（或任何资源，例如视频，字体）保存在公用文件夹中。

只需编写<img src='/assets/images/Call.svg' />即可从您的任何React组件访问Call.svg图像

注意：将您的资产保存在公用文件夹中可确保您只需从项目“ / path_to_image”开始，而无需通过任何路径遍历“ ../”，即可从项目的任何位置访问资产。 ./'像这样

Answer 12

这对我有用。首先，让我们了解问题所在。您不能使用变量作为要求的参数。 Webpack需要在编译时知道要捆绑的文件。

当我得到错误时，我认为它可能与绝对或相对错误有关。所以我传递了一个硬编码的值，要求如下：。运行正常。但就我而言，值是来自props的变量。我尝试传递一些建议的字符串文字变量。那没起效。我还尝试使用所有10个值的切换大小写定义本地方法（我知道这不是最佳解决方案，但我只是希望它能以某种方式工作）。那也没有用。然后我知道我们不能将变量传递给require。

作为一种解决方法，我修改了data.json文件中的数据以将其限制为仅图像的名称。来自道具的此图像名称为String文字。我将其连接到硬编码值，如下所示：

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
}

徽标中包含的实际值将来自data.json文件，并将引用诸如photonap.svg之类的图像名称。

Answer 13

如果您是使用 create-react-app 创建的应用。您只需要将图像放在 / public 文件夹中即可。并提供相对于公用文件夹的路径。

假设您的公用文件夹中有图片my-image.png，就可以这样做。

<img src='my-image.png'/>

无论您将该HTML代码行放在何处。 React将知道它需要从公共目录中获取图像。

非常容易；）

Answer 14

我遇到了同样的问题，我已经找到了这个解决方案，它的作用就像魔法一样。 src={${window.location.origin.toString()}/${Image name here}}

Answer 15

使用默认属性：

<img src={require(`../../assets/pic-${j + 1}.jpg`).default} alt='pic' />

Answer 16

我将在create-react-app项目中分享对我有用的解决方案：

在同一images文件夹中包含一个js文件，该文件导出所有图像，在需要该图像的组件中，导入该图像并使用它:)，Yaaah多数民众赞成在其中查看详细信息

folder structure with JS file

// js file in images folder
export const missing = require('./missingposters.png');
export const poster1 = require('./poster1.jpg');
export const poster2 = require('./poster2.jpg');
export const poster3 = require('./poster3.jpg');
export const poster4 = require('./poster4.jpg');

您可以导入组件：从“ ../../assets/indexImages”导入{missing，poster1，poster2，poster3，poster4}；

您现在可以将其用作图像标签的src。

祝您编程愉快！

Answer 17

我遇到的最有效的解决方案是使用CSS设置图像

.profile_img {
   background-image: url('https://img.icons8.com/contacts.png');
}

您可以为jsx提供类似的类名

 <Icon className="profile_img" />

在组件声明中，您只需执行此操作

const Icon = () => {
   return(
     <img src='' alt='profileicon'/>
   )
}

Answer 18

src={"/images/resto.png"}

以这种方式使用src属性意味着，将从您站点的绝对路径“ /images/resto.png”加载您的图像。图片目录应位于网站的根目录。例： http://www.example.com/images/resto.png

Answer 19

我只想留下以下内容，以增强上面接受的答案。

除了接受的答案外，您还可以通过在Webpack中指定alias路径来使自己的生活变得更轻松，因此您不必担心图像相对于文件的位置。当前在。请参见下面的示例：

Webpack文件：

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

使用：

<img src={require("public/img/resto.ong")} />

Answer 20

有时您可以输入而不是在图像位置/ src中输入：尝试

./assets/images/picture.jpg

代替

../assets/images/picture.jpg

Answer 21

尝试将server.js中的代码更改为 -

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));

Answer 22

对我有用的是在反引号和$ {}之间插入路径。例如，而不是：

fornece_sec(ean, nif)

使用：

<img src={require("../images/resto.png")} />

这样，编译代码时会插入正确的路径。

React不会加载本地图片

22 个答案: