错误代码

<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 设置@

最后

以上就是土豪太阳为你收集整理的vue 加载图片使用@路径加载不出来错误代码正确代码原因参考的全部内容，希望文章能够帮你解决vue 加载图片使用@路径加载不出来错误代码正确代码原因参考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。