vue 加载图片使用@路径加载不出来

错误代码

<el-image src="@/assets/images/logo.png"></el-image>

<img src="@/assets/images/logo.png"></el-image>

正确代码

<el-image :src="require('@/assets/images/logo.png')"></el-image>

// 或者

<img src="~@/assets/images/logo.png"></el-image>

// css
.login-container {
  min-height: 680px;
  min-width: 1200px;
  background: url(~@/assets/login_images/login-bg.jpg) no-repeat;
}

//script
import logoImg from '@/assets/logo/logo.png'

data() {
  return {
    logo: require('@/assets/images/login-img.png'),
    logo2: logoImg,
  }

原因

@为 webpack 中配置的引用路径，以“@”引用为项目的src目录，所以在使用引用路径时，前面需要加“~”，或者require('’）

参考

解决el-image加载图片时不能使用相对路径问题 - 亨利zhong的个人空间 - OSCHINA - 中文开源技术交流社区

如何在vue项目中配置引用路径“@”_凡尔赛学院的博客-CSDN博客_vue 设置@