webpack打包图片时没报错但是不显示图片，教你一招解决

在看webpack视频教学时因为老师的版本和自己的版本不一致导致在打包处理图片是一直显示不了图片，查询了一些技术论坛后才解决了这个困扰我好多天的问题
直接上源代码

看看我的目录

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script defer src="built.js"></script></head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <img src="img/5726e17b87.png" alt="">
    <img src="img/6dd6bc3a25.png" alt="">
</body>

</html>

less

.box1{
    width: 200px;
    height: 200px;
    background-image: url(./0.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.box1{
    width: 200px;
    height: 200px;
    background-image: url(./1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
.box1{
    width: 200px;
    height: 200px;
    background-image: url(./160.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

js文件

import './index.less'

webpack5 webpack-config-js

{
    
    
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                loader: 'url-loader',
                options: {
    
    
                    // 图片会大于8kb，会被base64处理  减少请求数量（减轻服务器压力） 图片体积会更大（文件请求数量慢）
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',  // hash值的前十位 [ext]表示取文件原来的扩展名
                    outputPath: 'img',   // 输出到img
                    esModule: false
                },
                type: 'javascript/auto'  //因为webpack5对url-loader已经弃用，如果想继续使用需要添加type: 'javascript/auto'
 },

解释一下为什么有的图片输出不了，因为当图片大小小于8kb时，会被base64处理
base64的优点：能够减少请求数量（可以减轻服务器压力）
base64的缺点：图片体积会变大（导致文件请求变慢）

webpack4 webpack-config-js

{
    
    
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                loader: 'url-loader',
                options: {
    
    
                    // 图片会大于8kb，会被base64处理  减少请求数量（减轻服务器压力） 图片体积会更大（文件请求数量慢）
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',  // hash值的前十位 [ext]表示取文件原来的扩展名
                    outputPath: 'img',   // 输出到img
                },
 },

相信大部分人能够解决问题了吧

webpack打包图片时没报错但是不显示图片，教你一招解决

猜你喜欢