关于img的src动态赋值图片不显示的问题

项目场景：

当用户没有设置头像时，显示默认头像。

问题描述

当 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="">