一张图片引发的一系列事件。。。
问题描述:
<img>标签需要动态引入图片，请求接口返回不同的图片名称展示不同的图片；
通过返回的图片名称直接动态引入
js中定义图片路径;
const data = './assets/1.jpg';
页面中引用：
<img :src="data"/>
- 图片路径变为： (http://localhost:8081/assets/avatar.jpg),找不到图片；
路径应该为：(http://localhost:8081/static/img/avatar.jpg)才对； - npm run build 之后，该图片未被打包。
原因：webpack机制问题；
webpack会打包页面用到的图片，用不到的不被打包;
webpack中有一个包叫做url-loader，他可以将html以及css中的图片打包成base64或者图片本身，但是js中的图片路径，webpack并不能编译打包；
解决方案：
模块化引入：
图片通过模块化引入后，地址为打包后的绝对路径 /static/img/avatar.jpg;
<template>
<div id="app">
<img src="./assets/login-icon.png">
<!-- 错误示范: 这种方式不能正确引用 -->
<img :src="img">
<!-- 正确示范: 模块化方式引用 -->
<img :src="require(`./assets/${img2}`)">
<!-- 正确示范: 模块化方式引用2 -->
<img :src="img3">
<router-view/>
</div>
</template>
<script>
import loginIcon from './assets/login-icon.png';
export default {
name: 'App',
data() {
return {
img2: 'login-icon.png',
img: './assets/avatar.jpg',
img3: loginIcon,
};
},
}
</script>
注意：import只能引入静态资源，不能进行JS字符串的拼接,
require()可以通过拼接方式引入；
分析 webpack图片打包：
webpack中有两个对于图片处理的loader(file-loader、url-loader);
- url-loader: 在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 大小限制，如果低于10000byte,图片会自动转为base64
name: utils.assetsPath('img/[name].[hash:7].[ext]') // 编译后图片名称(name: 图片名称；hash:7: 是图片内容的MD5的7位哈希值，ext: 图片后缀)
fallback： ' responsive-loader ' ,
}
},
小图片转为base64后，页面不会发请求，这样可以节省加载时间；
官网：对于fallback：
- 类型String 默认：'file-loader'
- 指定当目标文件的大小超过limit选项中设置的限制时要使用的备用加载程序(默认file-uploader)。
- file-loader则默认使用该文件 并将所有查询参数传递给它。
file-loader通过fallback选项启用使用替代方法 。
