如何优雅地在 Vue 页面中引入 img 图片

2021 年 12 月 13 日
本文字数：879 字
阅读完需：约 3 分钟

我们在学习 html 的时候，图片标签<img>引入图片

<img src="../assets/images/avatar.png" width="100%">复制代码

复制代码

但是这样会有 2 个弊端：

因为采用绝对路径引入，所以如果后面这张图片移动了目录，就需要修改代 src 里的路径
如果这张图片在同一页面内有多个地方要使用到，就需要引入多次，而且图片移动了目录，这么多地方都要修改 src 路径

怎么办？使用动态路径 import、require

首先讲讲这两个兄弟，在 ES6 之前，JS 一直没有自己的模块语法，为了解决这种尴尬就有了require.js，在 ES6 发布之后 JS 又引入了import的概念

使用import引入

import之后需要在 data 中注册一下，否则显示不了

<script>import lf1 from '@/assets/images/lf1.png'import lf2 from '@/assets/images/lf2.png'import lf3 from '@/assets/images/lf3.png'import lf4 from '@/assets/images/lf4.png'import lf5 from '@/assets/images/lf5.png'import lf6 from '@/assets/images/lf6.png'import lf7 from '@/assets/images/lf7.png'import top1 from '@/assets/images/icon_top1.png'
export default {  name: 'Left',  data () {    return {      lf1,      lf2,      lf3,      lf4,      lf5,      lf6,      lf7,      top1    }  }}</script>复制代码

复制代码

使用require引入

<script>import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
export default {  name: 'Right',  data () {    return {      rt1: require('@/assets/images/crt1.png'),      rt2: require('@/assets/images/crt2.png'),      rt3: require('@/assets/images/crt3.png'),      rt4: require('@/assets/images/crt4.png'),      rt5: require('@/assets/images/crt5.png'),      rt6: require('@/assets/images/crt6.png'),      top1    }  }}</script>

复制代码

最后

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激！

发布于: 2 小时前阅读数: 3

💥 玩命不玩心💥

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步，能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

发布

暂无评论

创作场景

如何优雅地在 Vue 页面中引入 img 图片

怎么办？使用动态路径 import、require

最后

💥 玩命不玩心💥

评论