Question

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

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

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

但是，我试图在“项目”页面上使用包含图像的Bootstrap卡。我遵循了关于AboutMe页面上的相同步骤；我导入图像并将标签添加到卡中。当我检查我的站点在本地主机上运行时，该图像未显示，并且控制台报告错误，并带有“：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表示我的所有图像均已成功构建，但是我不知道为什么只有一个图像显示在我的网站上。

任何帮助将不胜感激！

Answer 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>

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

Answer 2

我使用Webpack config 4x构建的React App遇到了这个问题。我花了几个小时，但最终现在可以正常工作了。

在/ src下创建一个名为asset / images的文件夹
将我的图像复制到上述文件夹中
如果您还没有npm我的网址加载器
在我的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>

反应：404在导入本地图像时发现

2 个答案: