vue 加载图片使用@路径加载不出来错误代码正确代码原因参考

104 阅读 0 评论 69 点赞

我是靠谱客的博主土豪太阳，这篇文章主要介绍vue 加载图片使用@路径加载不出来错误代码正确代码原因参考，现在分享给大家，希望可以做个参考。

错误代码

复制代码

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

正确代码

复制代码

1
2
3
4
<el-image :src="require('@/assets/images/logo.png')"></el-image>
// 或者
<img src="~@/assets/images/logo.png"></el-image>

复制代码

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

复制代码

1
2
3
4
5
6
7
//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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：104 次浏览
发布日期：2023-10-13 09:10:17
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzokf5_13_j_22_3.html

vue 加载图片使用@路径加载不出来错误代码正确代码原因参考

错误代码

正确代码

原因

参考

最后

评论列表共有 0 条评论

发表评论取消回复

vue 加载图片使用@路径加载不出来错误代码正确代码原因参考

错误代码

正确代码

原因

参考

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复