React：导入本地图像时发现404答案

【问题标题】：React: 404 Found when importing local imagesReact：导入本地图像时发现404
【发布时间】：2020-10-29 09:30:03
【问题描述】：

我无法在我的个人网站上显示图片。我正在使用 React 来显示我网站上的每个页面。在我的 AboutMe 页面上，我已成功导入图像并正确显示它，Webpack 在构建和查找图像时没有问题。正如你在下面看到的，这是我写的：

import img from '../../../public/assets/images/linked-in-profile.jpg'

<Col>
   <img className="about-image" src={img} />
</Col>

但是，在我的项目页面上，我正在尝试使用包含图像的引导卡。我按照在 AboutMe 页面上执行的相同步骤进行操作；我导入了图像并将我的标签添加到我的卡片中。当我检查在 localhost 上运行的站点时，图像未显示，并且我的控制台报告错误“：8080/public/Floor-Is-Lava.jpg:1 GET http://localhost:8080/public/Floor -Is-Lava.jpg 404（未找到）"

本页代码为：

import img from '../../../public/floor-is-lava.jpg'

<Card bg="light" text="secondary" style={{ width: '350px', height: '300px' }}>
   <img className="project-img" src={img} />
   <Card.ImgOverlay>
      <Card.Text>Go to github</Card.Text>
   </Card.ImgOverlay>
</Card>

错误指向我的 server/index.js 中的这个 sn-p 代码：

 // any remaining requests with an extension (.js, .css, etc.) send 404
  app.use((req, res, next) => {
    if (path.extname(req.path).length) {
      const err = new Error('Not found')
      err.status = 404
      next(err)
    } else {
      next()
    }
  })

我的 Webpack 说我的所有图片都已成功构建，但我不知道为什么只有一张出现在我的网站上。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html reactjs image webpack

【解决方案1】：

您收到该错误是因为您引用了公共目录图像。
将您的图像复制到 src 目录并导入它。那么它可能会起作用。

import img from '../../floor-is-lava.jpg'

<Card bg="light" text="secondary" style={{ width: '350px', height: '300px' }}>
   <img className="project-img" src={img} />
   <Card.ImgOverlay>
      <Card.Text>Go to github</Card.Text>
   </Card.ImgOverlay>
</Card>

如果您有任何问题，请告诉我。

【讨论】：

您好，感谢您的帮助！所以我在公共之外创建了一个名为 src 的目录。我将我的 assets/images 目录添加到 src 中。和以前一样，我的关于我的图片有效，但我的项目卡收到 404（未找到）...

【解决方案2】：

我刚刚使用 Webpack config 4x 构建的 React 应用程序遇到了这个问题。我花了几个小时，但现在终于搞定了。

在 /src 下创建了一个名为 assets/images 的文件夹
将我的图片复制到上述文件夹中
如果你还没有 npm i url-loader
在我的 webpack.config.js 中

const path = require('path');
const DIST_DIR = path.resolve(__dirname, 'public');
const SRC_DIR = path.resolve(__dirname, 'src');

module.exports = {

  entry: SRC_DIR + '/app/',
  output: {
    path: DIST_DIR + "/build",
    filename: 'bundle.js'
  },

  devServer: {
    port: 3333,
    contentBase: DIST_DIR + "/build",
    inline: true
  },

  module: {
    rules: [{
        test: /\.(js|jsx|png|jpg|svg|gif|ico)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
          }
        }],
      },
      {
        test: /\.css$/,
        use: 'css-loader'
      },
    ]
  }
};

在我的组件文件中：

import imageToRender from '../../assets/images/some.jpg';

...
...

<div>
   <img src={imageToRender}/>
</div>

【讨论】：