动态拼接图片的一尝试

116 阅读1分钟

问题描述:

在项目开发中,要依据当前系统显示语言,动态展示和该语言匹配的本地图片。

使用img标签的src属性引入图片

<img :src="require(`@/assets/imgs/pic_home_lottery_${$i18n.locale}.png`)" />

使用background样式引入图片

<div :style="{'background-image': `url(${require('../../assets/imgs/bg_invite_' + $i18n.locale +'.png')})`, 'background-repeat': 'no-repeat', 'background-size': '100%'}"></div>

总结

  1. 图片引入时一定要使用 require 字段

  2. 绝对路径和相对路径都可

  3. 字符串拼接和模板字符串拼接看个人喜好