时间戳

首页 > 解决方案 > React：导入本地图像时发现404

javascript - React：导入本地图像时发现404

问题描述

我无法在我的个人网站上显示图片。我正在使用 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 中的这段代码：

 // 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 说我的所有图像都已成功构建，但我不知道为什么只有一张出现在我的网站上。

任何帮助将不胜感激！

标签： javascripthtmlreactjsimagewebpack

解决方案

您收到该错误是因为您正在引用公共目录图像。
将您的图像复制到 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>

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

推荐阅读