weback中loader的使用-图片文件

Posted 2022-12-13 supredreamer

1.在终端执行

cnpm i url-loader -D  //安装url-loader解决url报错
cnpm i file-loader -D   //内部依赖,不用在配置文件中配置

2.配置webpack.config.js

module：
    rules：[
         test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
        use: [
        loader:‘url-loader‘,
        options:
            limit:8192,//限制打包图片的大小：
            //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
            name:‘images/[name]-[hash:8].[ext]‘,//images:图片打包的文件夹；
            //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
            //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
        
        ]
    ]

 

3.图片引用的方式

1.css中的背景图片

background-image:url(./images/img.jpg)

2.html中<img>标签

 

<img src="./imges/img.jpg">

 

3.js中的路径赋值

const img=getElementByTagName(‘img‘)[0];
img.src="./imges/img.jpg"