项目场景:
当用户没有设置头像时,显示默认头像。
问题描述
当 src
属性前不加冒号(:)时,浏览器会将其解析为普通字符串,此时浏览器会尝试直接加载这个字符串表示的图片路径。
<img src="@/assets/img/default_avatar.png" alt="">
当动态绑定头像时,无法显示:
<img :src="!user.avatar ? '@/assets/img/default_avatar.png' : user.avatar" alt="">
原因分析:
在 Vue 2 版本中,静态资源文件需要使用 require
进行预加载。这是因为Vue 2 使用了 Webpack 进行打包,而 Webpack 默认不处理小于 10KB 的文件。加入 require
可以让 Webpack 知道这张图片的存在,并将其打包到构建产物中。
解决方案:
使用require
预加载图片:
<img :src="!user.avatar ? require('@/assets/img/default_avatar.png') : user.avatar" alt="">