React不会加载本地图像

我正在构建一个小型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');
});

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

我开始使用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;

这对我来说非常有效。这是该README的主文档的链接，它解释了（摘录）：

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

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

另一种方法是：

首先，安装这些模块：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

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

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

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

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

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

Webpack文件：

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

用：

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

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

正如从文档指出这里时，它通常是最好的，因为需要导入的图像。

但是，由于文件中的以下建议，我需要动态加载许多文件，这导致我将图像放入公用文件夹（也在README中进行了说明）：

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

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

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

我正在开发一个使用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" />

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

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

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

./assets/images/picture.jpg

代替

../assets/images/picture.jpg

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

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

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

当我得到错误时，我认为它可能与绝对或相对路径问题有关。因此，我传递了一个硬编码值，要求如下：<img src = {require（“ ../ assets / images / photosnap.svg”）} alt =“” />。工作正常。但就我而言，值是来自props的变量。我尝试传递一些建议的字符串文字变量。它不起作用。我也尝试使用所有10个值的切换大小写定义本地方法（我知道这不是最好的解决方案，但我只是希望它能以某种方式工作）。那也没有用。然后我知道我们不能将变量传递给需求。

作为一种解决方法，我修改了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之类的图像名称。

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

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

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

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

您必须先导入图像然后再使用它。它为我工作。

import image from '../image.png'

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