React 不会加载本地图像

Question

我正在构建一个小型 React 应用程序，但我的本地图像无法加载。像placehold.it/200x200 这样的图像加载。我想这可能是服务器的问题？

这是我的 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={require('/images/image-name.png')} /> 替换图像名称而不是 <img src={"/images/resto.png"} /> .png 为它们每个都具有正确的图像名称。这样 Webpack 就能够处理和替换源 img。

Answer 2

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

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

Answer 3

另一种方法：

首先，安装这些模块：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 的内联文件的字节限制

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

最后，你可以这样做：

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

您可以在此处进一步研究这些加载程序：

网址加载器：https://www.npmjs.com/package/url-loader

文件加载器：https://www.npmjs.com/package/file-loader

Answer 4

我开始使用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 导入不同，导入 文件给你一个字符串值。该值是您可以选择的最终路径 在您的代码中引用，例如作为图像的 src 属性或 PDF 链接的 href。

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

Answer 5

其实我想发表评论，但我还没有被授权。这就是为什么假装是下一个答案，而不是。

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]}/> 

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

Answer 6

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

./assets/images/picture.jpg

而不是

../assets/images/picture.jpg

Answer 7

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

除了接受的答案之外，您还可以通过在 Webpack 中指定 alias 路径来让自己的生活更轻松一些，因此您不必担心图像相对于您当前所在文件的位置请看下面的例子：

Webpack 文件：

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

用途：

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

Answer 8

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

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

但是，我需要动态加载许多文件，这导致我将图像放在公用文件夹 (also stated in the README) 中，因为文档中的以下建议：

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

• 您需要在构建输出中具有特定名称的文件，例如 manifest.webmanifest。
• 您有数千张图片，需要动态引用它们的路径。
• 您希望在捆绑代码之外包含一个小脚本，例如 pace.js。
• 某些库可能与 Webpack 不兼容，您别无选择，只能将其作为标签包含。

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

Answer 9

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

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

Answer 10

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

我的目标是预加载图像以在互联网连接离线时显示它。 （这可能不是最佳做法，但因为它对我有用，所以现在没关系） 仅供参考，我也在这个项目中使用 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 11

react中加载本地图片的最佳方式如下

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

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

注意： 将资产保存在公用文件夹中可确保您可以从项目的任何位置访问它，只需提供 '/path_to_image' 而无需任何路径遍历 '../. ./' 像这样

Answer 12

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

当我收到错误时，我认为它可能与绝对路径与相对路径问题有关。所以我传递了一个硬编码的值来要求，如下所示： .它工作正常。但在我的情况下，该值是来自道具的变量。我试图按照一些建议传递一个字符串文字变量。它不起作用。此外，我尝试使用 switch case 为所有 10 个值定义一个本地方法（我知道这不是最佳解决方案，但我只是希望它以某种方式工作）。那也没用。然后我才知道我们不能将变量传递给require。

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

import React from "react";

function JobCard(props) {  

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

徽标中包含的实际值将来自 data.json 文件，并引用一些图像名称，例如 photosnap.svg。

Answer 13

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

import image from '../image.png'

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

Answer 14

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

在同一个图像文件夹中包含一个导出所有图像的 js 文件，并在需要图像的组件中导入该图像并使用它:)，就是这样，让我们​​详细查看

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 15

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

荣誉。

Answer 16

通过简单的导入，您可以在 React 中访问图像

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

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

Answer 17

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

所以，你需要写：

import myImage from './imageFolder/imageName'

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

请看下面的截图：

Answer 18

使用默认属性：

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

Answer 19

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

Answer 20

我是这样解决的。

所以我只有在映射包含多个图像的数组时才会遇到这个问题。通常使用导入 import artist3 from './../../../assets/images/cards_images/artists/artist3.png'; 可以正常工作，但问题是在循环多个图像形成数组时。

我正在分享我用来解决它的解决方案。

以前--我用的是imageurl: 'your_image_url.png'

现在------所以在我的数组中我改成了imageurl: require('your_image_url.png')

  const artists = [
{firstname: 'Trevor', lastname: 'Bowman', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },
{firstname: 'Julia', lastname: 'Deakin', imageurl: require('./../../assets/images/cards_images/artists/artist2.png') },
{firstname: 'Stewart', lastname: 'Jones', imageurl: require('./../../assets/images/cards_images/artists/artist3.png') },
{firstname: 'Arsene', lastname: 'Lupin', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },

 ]

现在在另一个组件中，我使用此数据循环遍历我绑定到图像 src 的艺术家，如下所示

<img src={artist.imageurl.default} className="artists__content--image br-08" alt={'img'+index} />

因为当您放置 require() 事物时，您会得到 Module 对象，该对象具有 default 属性和我们的 url（下面附上屏幕截图）

所以 .default 是在使用 require() 之后才访问 url 的额外的东西

Answer 21

• 首先，检查您是否指定了图片的当前位置，如果您在设置正确路径时遇到困难，可以使用this。

• 第二，像导入任何js文件一样导入图片，像这样

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

你可以给 x 起任何名字！！

Answer 22

如果您的images 文件夹位于public 文件夹中，则需要尝试以下操作：

我有同样的问题，希望通过尝试这个，一切都恢复正常。

当您处理 HTML 和 CSS 时，您可以使用旧方法来访问图像。但是当你在 React 中时，你基本上是在处理 JSX。所以这个解决方案可能对许多在 React 中正确加载图像而苦苦挣扎的 React 程序员有所帮助。

仅供参考：

您还记得我们在index.js 文件夹中的index.js 文件中有一个很长的注释吗？如果您不记得我在说哪个评论，请查看下面的屏幕截图??：

我认为阅读它可能会有所帮助，因为它实际上与这个主题和问题有关。