Question

如何使Webpack加载图像扩展名？我在scr文件夹中有如下图像

src/images/logo.png
scr/images/pic1.png

我在html文件中按如下方式调用它们

<img src="images/logo.png" class="img-responsive" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Work Title">

我的webpack配置如下。

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [
                    'file-loader?name=images/[name].[ext]'
                ]
            },
            {
                test: /\.png$/,
                use: [
                    'file-loader?name=images/[name].[ext]'
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

但是，当我尝试运行该应用程序时，出现以下错误。

> wakili101@1.0.0 start /home/karanu/Documents/wakili101
> webpack-dev-server --open --mode development

ℹ ｢wds｣: Project is running at http://localhost:8082/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 51a9c30e9d6832d4b753
Version: webpack 4.28.4
Time: 2451ms
Built at: 01/16/2019 3:47:58 AM
                Asset        Size  Chunks             Chunk Names
         ./index.html  1020 bytes          [emitted]
images/wakililogo.png    67 bytes          [emitted]
              main.js     1.2 MiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8082 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/events/events.js] 8.13 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8082] (webpack)-dev-server/client?http://localhost:8082 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.js] 72 bytes {main} [built]
[./src/js/components/container/FormContainer.jsx] 3.66 KiB {main} [built]
    + 26 hidden modules

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src':
  Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src'

  - compiler.js:79 childCompiler.runAsChild
    [wakili101]/[html-webpack-plugin]/lib/compiler.js:79:16

  - Compiler.js:300 compile
    [wakili101]/[webpack]/lib/Compiler.js:300:11

  - Compiler.js:556 hooks.afterCompile.callAsync.err
    [wakili101]/[webpack]/lib/Compiler.js:556:14


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [wakili101]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:553 compilation.seal.err
    [wakili101]/[webpack]/lib/Compiler.js:553:30


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [wakili101]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1323 hooks.optimizeAssets.callAsync.err
    [wakili101]/[webpack]/lib/Compilation.js:1323:35



Child html-webpack-plugin for "index.html":
                    Asset      Size  Chunks             Chunk Names
    images/wakililogo.png  67 bytes          [emitted]
     + 1 hidden asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 22.3 KiB {0} [built]
    [./src/images/wakililogo.png] 67 bytes {0} [built]

    ERROR in ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html)
    Module not found: Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src'
     @ ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html) 1:16387-16417
ℹ ｢wdm｣: Failed to compile.

我尝试更改图像的位置。那没有用。我曾尝试将图片从png更改为jpeg，反之亦然，但这也没有用。

Answer 1

尝试使用url-loader而不是file-loader：

{
  test: /\.png$/,
  use: 'url-loader'
},

Answer 2

按照Hisagr的说明尝试url loader，但是另外，您不应该使用 <img src="images/logo.png"/>想要在React项目中添加图像时。您应该使用<img src={require('images/logo.png')} />。我希望这会有所帮助。

Webpack不加载图像扩展名

2 个答案: