Question

这是我的webpack.config.js文件

{
                test: /\.(jpe?g|png|gif|svg|jpg)$/i,
                use: [
                    "file-loader?hash=sha512&digest=hex&name=[hash].[ext]",
                    {
                        loader: "image-webpack-loader",
                        options: {
                            mozjpeg: {
                                progressive: true
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            optipng: {
                                optimizationLevel: 4
                            },
                            pngquant: {
                                quality: "75-90",
                                speed: 4
                            }
                        }
                    }
                ]
            }

这里是我的components文件夹

中的一些project.js模块

import React, { Component } from "react";
import Pexels from 'pexels_1.png';

但这会导致＆＃34;无法解决＆＃39; pexels_1.png＆＃34;

Answer 1

这很可能是错误的路径问题，因为这是如何通过反应引用图像。

试试'./pexels_1.png'

这是我的webpack，它确实有效。

{
    test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
    exclude: /\.glyph.svg/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 6000,
          name: 'image/[name].[ext]',
        },
      },
    ],
  },

将图像urls / src导入JavaScript模块 - React

1 个答案: