从公用文件夹中反应导入图像

Question

我正在尝试从我的公共目录获取静态图像，但未找到。我没有使用 CRA，所以我可能缺少一些 Webpack 配置。使用文件加载器模块并导入图像在开发模式下有效，但不适用于我的生产服务器规范

我的项目结构：

 \public
   \static
      \images
         image.png
\src
   \component
      component.js
...
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js

在 component.js 上，我想像这样在 static/images 文件夹中获取 image.jpg ：

   <img src='/static/images/image.png'></img>

但我收到 404 未找到。

我的 webpack.commom.js：

 const CleanWebPackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve('./dist'),
        publicPath: "/"
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: ['/node_modules'],
                use: [{ loader: 'babel-loader'}],
            },
            {
                test: /\.s?(a|c)ss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                },{
                    loader: 'sass-loader'
                }]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {},
                  },
                ],
              },

        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: 'index.html'
        }),
        new CleanWebPackPlugin(),
    ],
}

和开发版本：

 module.exports = merge(common, {
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 3000,
        open: true,
        historyApiFallback: true,
        publicPath: "/",
    }
})

先感谢您。

原文由 7xRobin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在使用 file-loader 作为 webpack 插件，它不能以“仅将 public 的目录结构镜像到 dist”的方式工作。您可以在此处找到该插件的文档： https ://webpack.js.org/loaders/file-loader/

基本上，该插件所做的是，如果您导入一个图像文件（实际上是以编程方式导入它，而不仅仅是使用对其路径的字符串引用），该文件将被复制到您的 dist 目录，可能重命名并且比在您编译的源代码中正确的文件名被插入。

所以在你的情况下，如果你想使用 file-loader 解决你的问题，你会引用图像文件

// Relative path to image file from js file
import imageFile from './assets/image.png';

// ...
const component = props => <img src={imageFile}></img>;

如果你想使用实际上只是镜像 public 目录到 dist 目录的方法，你需要为此使用一个额外的 webpack 插件（例如 https://stackoverflow.com/a/33374807 /2692307 )

顺便说一句，我假设它在开发模式下工作，因为您将“/”设置为公共路径，因此开发服务器也只提供根目录中的所有内容。然而，这与将文件复制到 dist 不同，因为您正在尝试实现。

原文由 Lukas Bach 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我假设你想多次显示这样的图像。在那种情况下，继续写类似 ‘%PUBLIC_URL%/img/static/images/image.png’ 或 {process.env.PUBLIC_URL + ‘/img/static/images/image.png’} 二、三之类的东西很烦人或在您的 jsx 代码中多次。基本上，如果您的应用程序根目录在 src 文件夹中，则没有插件是不可能从公共文件夹导入图像的。但是我确实找到了适合我的解决方案，而且实际上非常简单。是这样的：

 import React from 'react'

var path = process.env.PUBLIC_URL;
var image = "/img/static/images/image.png";

然后，在 jsx 代码中：

 <img src={path + image}/>

它对我有用，希望这对任何人都有帮助！ :D

原文由 Dev 发布，翻译遵循 CC BY-SA 4.0 许可协议