将图像URL/SRC导入JavaScript模块 - React

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
                            }
                        }
                    }
                ]
            }

这是我的一些项目。

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

但这呈现出"无法解决'pexels_1.png"

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]',
        },
      },
    ],
  },