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: "/",
    }
})

谢谢。

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有所不同。

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

Answer 3

不确定是否有此帮助，但是我会尝试的

尝试将公用路径也添加到dist文件夹中

output: {
        path: path.resolve(__dirname, "/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },

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

3 个答案: