从公共文件夹反应导入图像答案

【问题标题】：React import images from public folder从公共文件夹反应导入图像
【发布时间】：2020-02-06 06:48:33
【问题描述】：

我正在尝试从我的公共目录中获取静态图像，但没有找到。我没有使用 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: "/",
    }
})

提前谢谢你。

【问题讨论】：

几件事：您将“src”设置为“/static/image.png”，但根据您的项目结构，它应该是“/static/images/image.png”。那是错字吗？运行生产构建后，您的“dist/”文件夹是什么样的？它是否包含该图像文件？
确实是一个拼写错误。在生产 dist/fold 中，如果我通过加载器 webpack 插件导入，图像就会出现，这对我来说不是一个好的选择。

标签： javascript node.js reactjs webpack ecmascript-6

【解决方案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-directory 镜像到 dist 目录的方法，则需要为此使用额外的 webpack-plugin（例如https://stackoverflow.com/a/33374807/2692307）

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

【讨论】：

使用文件加载器导入有效，但我需要直接从等公共路径访问源代码。 但开发服务器找不到源。这是个大问题。 copy-webpack-plugin 解决了我的问题，但不知道为什么。无论如何，谢谢。

【解决方案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

【讨论】：

【解决方案3】：

不确定这是否有帮助，但我会尝试一下

尝试将公共路径添加到您的 dist 文件夹，也类似这样

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

【讨论】：