Javascript React-won'；不加载本地图像

我正在构建一个小的react应用程序，我的本地图像无法加载。像

placehold.it/200x200

load这样的图像。我想可能是服务器的问题

这是我的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;

---

当使用Webpack时，您需要

要求
图像，以便Webpack处理它们，这将解释为什么外部图像加载而内部图像不加载，因此，您需要使用
代替
为每个图像使用正确的图像名称替换image-name.png。这样，Webpack就可以处理和替换源img。
尝试将server.js中的代码更改为-

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

另一种方法是：

首先，安装以下模块：
url加载程序
，
文件加载程序

使用npm:
npm安装--保存开发url加载程序文件加载程序

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

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

限制
：内联文件作为数据URL的字节限制

您需要同时安装模块：
url加载程序
和
文件加载程序

最后，您可以执行以下操作：

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



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

url加载器：

文件加载器：
我开始使用创建应用程序（请参阅“创建新应用程序”选项卡）。随附的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;

从“React”导入React；
从“./logo.png”导入徽标；//告诉Webpack此JS文件使用此图像
console.log（徽标）；///logo.84287d09.png
函数头（）{
//导入结果是图像的URL
返回；
}
导出默认标题；

这对我来说非常有效。下面是一个例子，它解释了（节选）：

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

要减少对服务器的请求数，请导入
小于10000字节返回数据URI而不是路径。这
适用于以下文件扩展名：bmp、gif、jpg、jpeg和
巴布亚新几内亚

事实上，我想发表评论，但我还没有得到授权。这就是为什么它假装是下一个答案，而事实并非如此

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" />;

从“React”导入React；
从“./logo.png”导入徽标；//告诉Webpack此JS文件使用此图像
console.log（徽标）；///logo.84287d09.png
函数头（）{
//导入结果是图像的URL
返回；

我想继续这条路。当一个人有一张可以简单插入的图片时，这条路会很顺利。在我的例子中，这稍微复杂一点：我必须映射好几张图片。到目前为止，我发现唯一可行的方法是如下所示

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

import upperBody from./upperBody.png'；
从“./lowerBody.png”导入lowerBody；
从“/美学.png”导入美学；
让obj={上半身：上半身，下半身：下半身，美学：美学，敏捷：敏捷，耐力：耐力}
{Object.keys（skills）.map（（skill）=>{
报税表（

所以，我的问题是，是否有更简单的方法来处理这些图像？不用说，在更一般的情况下，必须从字面上导入的文件数量可能会很大，对象中的键数量也可能很大。（该代码中的对象显然涉及到按名称引用-其键）
在我的情况下，require相关程序未起作用-装载机在安装过程中产生了奇怪的错误，并且未显示任何工作标记；require本身也未起作用。
有时您可以输入，而不是在图像位置/src中输入：
试一试

而不是

../assets/images/picture.jpg

我只想留下以下内容，以增强上述公认的答案

除了公认的答案外，您还可以通过在Webpack中指定
别名
路径来简化自己的生活，这样您就不必担心图像相对于当前文件的位置。请参见下面的示例：

网页包文件：

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

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

使用：

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

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

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

正如文档中指出的，通常最好根据需要导入图像

但是，我需要动态加载许多文件，这导致我将图像放在公用文件夹（）中，因为文档中有以下建议：

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


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

希望这对其他人有帮助！如果我需要澄清任何问题，请给我留言

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

以这种方式使用src属性意味着您的图像将从站点的绝对路径“/images/resto.png”加载。图像目录应位于站点的根目录下。例如：
我正在开发一个使用SSR的项目，现在我想在这里分享我基于一些答案的解决方案

我的目标是预加载一个图像，以便在internet连接脱机时显示它。（这可能不是最佳做法，但既然它对我有效，现在就可以了）
仅供参考，我在这个项目中也使用了reacthook

  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" />

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

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

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


只需编写
，即可从以下任意位置访问Call.svg图像：
import React from "react";

function JobCard(props) {  

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



import image from '../image.png'

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



// 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');

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

import myImage from './imageFolder/imageName'

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