脚本宝典收集整理的这篇文章主要介绍了Vue页面中引入img图片的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<img src="../assets/images/avatar.png" width="100%">
但是这样会有2个弊端：
首先讲讲这两个兄弟，在ES6之前，JS一直没有自己的模块语法，为了解决这种尴尬就有了require.js，在ES6发布之后JS又引入了import的概念
import之后需要在data中注册一下，否则显示不了
<script> import lF1 From '@/assets/images/cITyOfVitality/lf1.png' import lf2 from '@/assets/images/cityOfVitality/lf2.png' import lf3 from '@/assets/images/cityOfVitality/lf3.png' import lf4 from '@/assets/images/cityOfVitality/lf4.png' import lf5 from '@/assets/images/cityOfVitality/lf5.png' import lf6 from '@/assets/images/cityOfVitality/lf6.png' import lf7 from '@/assets/images/cityOfVitality/lf7.png' import top1 from '@/assets/images/cityOfVitality/icon_top1.png' import mixins from './mixins' export default { name: 'LeftPiece', mixins: [mixins], data () { return { lf1, lf2, lf3, lf4, lf5, lf6, lf7, top1 } } } </script>
<script> import top1 from '@/assets/images/cityOfVitality/icon_top1.png' import mixins from './mixins' export default { name: 'RightPiecr', mixins: [mixins], data () { return { rt1: require('@/assets/images/cityOfVitality/rt1.png'), rt2: require('@/assets/images/cityOfVitality/rt2.png'), rt3: require('@/assets/images/cityOfVitality/rt3.png'), rt4: require('@/assets/images/cityOfVitality/rt4.png'), rt5: require('@/assets/images/cityOfVitality/rt5.png'), rt6: require('@/assets/images/cityOfVitality/rt6.png'), top1 } } } </script>
到此这篇关于Vue页面中引入img图片的方法的文章就介绍到这了,更多相关Vue引入img图片内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue页面中引入img图片的方法全部内容，希望文章能够帮你解决Vue页面中引入img图片的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。