一、img标签
1、静态引入(静态路径加载)
- 相对路径
<img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404">
- 绝对路径
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
2、动态引入(require 驱动加载)
data() {
return {
imgUrl: require("@/assets/404_images/404_cloud.png")
} } // 第一种 <div :style="{ background:'url(' + imgUr + ') no-repeat center/100% 100%', }" ></div> // 第二种 :style="{ background: `url(${imgUr }) no-repeat center/100% 100%`, }" // 第三种 <img class="pic-404__child left" src="imgUr" alt="404"> // 使用函数表达式 < img class="pic-404__child :alt="404" :src="retImg(imgUrl)"> retImg(imgUrl) { if(a) { return require("@/assets/404_images/404_cloud.png") } else { require("../../assets/404_images/404_cloud.png") } }
二、标签的背景图片设置。(background)
1、在class中使用 ~ 符号
// css样式 .item { background: url(~@/assets/img/04_2.jpg); background: url('~@/assets/img/04_2.jpg'); }
2、在style中设置
imgUr: require("@/assets/404_images/404_cloud.png") <div :style="{ background:'url(' + imgUr + ') no-repeat center/100% 100%', }" ></div> // 第二种 :style="{ background: `url(${imgUr }) no-repeat center/100% 100%`, }"
三、import导入
<img class="pic-404__child left" src="imgUr" alt="404"> import imgUrl from "@/assets/404_images/404_cloud.png" data() { return { imgUr, } }
补充:
webpack对图片进行打包时,通过配置webpack,对小图片打包时进行Base64转码,对于大图片则使用file-load处理,从而达到性能优化的效果。
优点:
base64就是一串字符串码表示的图片,在加载页面和js时一块加载出来,减少了加载图片时的http请求。加载一张图片时会发起一次http请求,http请求每次建立都会需要一定的时间,对于加载一张小图来说,下载图片所需的时间会比建立http请求的时间要短, 所以对小图进行base64转码是优化http请求,保证页面加速渲染,加快页面加载速度。
缺点:
base64会增加图片本身的大小,对于小图来说,转码增加的大小导致js加载延时能远远弥补建立http请求的时长。这种取舍是划算的。可是对于大图来说,这样的取舍是不划算的。
具体代码实现:
PS:url-loader只能处理css中的url引入的文件,要处理html中的img标签,还需要引入一个html-loader。
module.exports = { mode: 'production', module: { rules: [ // 图片处理 // 小于5K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。 // 大于5k的则直接file-loader打包, 而name也是file-loader的属性 { test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/, use: { loader: 'url-loader', options: { // 小于 5kb 的图片用 base64 格式产出 // 否则,依然延用 file-loader 的形式,产出 url 格式 limit: 5 * 1024, // 打包到 img 目录下 outputPath: '/img1/', // 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源) // publicPath: 'http://cdn.abc.com' } } }, // html中的img图片资源处理 { test: /\.html$/, loader: 'html-loader', options: { esModule: false, } }, // 其他资源处理 { exclude: /\.(html|css|js|less|jpg|png|gif)$/, loader: 'file-loader', options: { naem: '[hash:10].[ext]', outputPath: 'media' } } ] } }
配置打包后生成文件的存放位置:
output: { // 路径 path: __dirname + '/dist/', // 访问路径 publicPath:'/dist/' // 文件名 filename: 'js/[name].js' },
引:
https://blog.csdn.net/weixin_45121510/article/details/112345886
https://www.jianshu.com/p/3bf92ac8a188
标签:vue,http,url,loader,404,引入,加载,图片 From: https://www.cnblogs.com/morango/p/16720106.html