如何使用 webpack + react 渲染图像？

Posted 2023-02-22

【中文标题】如何使用 webpack + react 渲染图像？

【英文标题】：How to render images with webpack + react?

【发布时间】：2019-02-11 23:56:15

【问题描述】：

我对 react 和 webpack 还很陌生，我遇到了这个我不明白的奇怪问题。

问题：

当我检查图像时，上面是我看到的，显然没有显示我的图像。我正在使用文件加载器。

我的结构：

网络包：

const path = require("path");
const webpack = require("webpack");

const bundlePath = path.resolve(__dirname, "dist/");

module.exports = 
  entry: "./src/index.js",
  module: 
    rules: [
      
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options:  presets: ["env"], plugins: ["transform-class-properties"] ,
      ,
      
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["eslint-loader"],
      ,
      
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      ,

      
        test: /\.(png|jpg|gif)$/,
        use: [
          
            loader: "file-loader",
            options: ,
          ,
        ],
      ,
    ],
  ,
  resolve:  extensions: ["*", ".js", ".jsx"] ,
  output: 
    publicPath: bundlePath,
    filename: "bundle.js",
  ,
  devServer: 
    contentBase: path.join(__dirname, "public"),
    port: 8080,
    publicPath: "http://localhost:8080/dist",
    historyApiFallback: true,
  ,
  plugins: [new webpack.HotModuleReplacementPlugin()],
;

我错过了什么？

编辑：

像这样导入图像：

import headerImage from "../../../../public/images/MyImage.jpg"

像这样渲染：

class Header extends Component 
    linkClick = event => 
      if (this.props.properties.movment.position.x > 0) event.preventDefault();
    ;
    render() 
      return (

              <Navbar inverse fluid >

              <Navbar.Header>
                <Navbar.Brand>
               <Image src=headerImage/>
                </Navbar.Brand>
                <Navbar.Toggle />
              </Navbar.Header>

              <Navbar.Collapse>
                <Nav pullRight>
                <HeaderLinks linkClicked=this.linkClick />
                </Nav>
              </Navbar.Collapse>

              </Navbar>
      );
    

【问题讨论】：

如何在你的 react 组件中导入图片？

是的，发布你如何导入图像的代码

请检查编辑

我认为你应该看看这个帖子***.com/questions/37671342/…，似乎file-loader 正在使用publicPath 属性，它可能是你的问题的解决方案

你可以试试这个输出：output: publicPath: "/dist/", path: path.resolve(__dirname, "dist"), filename: "bundle.js"

【参考方案1】：

var requireImages = require.context('../public/images', true, /\.(jpg|png|gif|svg)$/);

您可以在 index.js 文件中插入上述代码，以直接从应用程序的任何位置引用您的图像。

您也可以继续在头文件中使用<Image src="./public/images/MyImage.jpg" />，而无需单独导入每个图像。

编辑：请检查路径并确保它指向 dist>public>images 文件夹中的图像

【讨论】：

我将此添加到我的 indes.js 文件中，但我不知道我应该如何在我的标题组件中引用它？能不能给个更详细的解释

查看编辑。我用错了牙套，那部分被隐藏了。

还是不行，不同的是url现在是“../../../../public/images/MyImage.jpg”

等等。我对 webpack 路径和原始图像路径感到困惑。让我改变它

增加了文件加载器的限制，见下面我的回答。感谢您的尝试！竖起大拇指！

【参考方案2】：

这需要一些时间，但似乎我需要增加字节限制才能使其正常工作。

我还通过链接将 webpack confic 更改为 @Olivier Boissé 的建议者

test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader?name=/public/images/[name].[ext]",
options: 
  limit: 100000,
,

还有以下内容：

  output: 
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "bundle.js",
  ,