Vue.js中如何用v-if实现未上传图片时展示默认静态图，代码不生效如何解决

问题原因 #

代码不生效的核心原因是：动态绑定的:src中的字符串别名@不会被构建工具（webpack/vite）自动解析处理，只有静态写在<img src="xxx">属性里的路径才会触发构建工具的路径替换逻辑，你代码里的'@/assets/images/upload.png'会被原样当成字符串输出，浏览器找不到对应路径的资源自然加载失败。

解决方案1：require包裹路径（webpack环境通用，如Vue CLI创建的项目） #

把占位图路径用require()包裹触发webpack的资源解析逻辑即可：

<img 
  :src="sub_section.imageURL ? sub_section.imageURL : require('@/assets/images/upload.png')"  
  alt=""
>

如果是动态拼接路径，需要把固定前缀写在require内，例如require('@/assets/images/' + 文件名)，不可把完整路径作为变量传入require。

解决方案2：提前import导入图片（vite/webpack全环境通用，Vue3/Vite项目推荐） #

在script标签顶部提前导入占位图资源，挂载到实例后在模板使用：

// script 部分
import defaultUploadImg from '@/assets/images/upload.png'

export default {
  data() {
    return {
      defaultUploadImg, // 挂载导入的图片资源
      sub_section: {} // 你的原有数据
    }
  }
}

模板直接调用变量即可，还可以用||简化三元表达式：

<img 
  :src="sub_section.imageURL || defaultUploadImg"  
  alt=""
>

解决方案3：使用public目录静态资源路径 #

如果不需要对占位图做压缩等构建处理，可以把upload.png放到项目根目录的public/images文件夹下，直接写绝对路径即可：

<img 
  :src="sub_section.imageURL ? sub_section.imageURL : '/images/upload.png'"  
  alt=""
>

内容的提问来源于stack exchange，提问作者etranz