一般情况下，我们在使用require存放一个图片地址时，都是这么写：
<img width="100%; height: 100%" :src="bannarsrc" /> <script> data () { return { bannarsrc: require(‘@/assets/images/bannar-small.png‘) } } </script>
然后当适配不同的设备时直接对这个地址进行赋值即可
changeBannarImage() { const phone = 414; //手机 const ipad = 768; //ipad //const ipadpro = 1024 //ipadpro if (document.body.clientWidth <= phone) { this.bannarsrc = require("@/assets/images/bannar-small.png"); } else if ( document.body.clientWidth >= phone && document.body.clientWidth <= ipad ) { this.bannarsrc = require("@/assets/images/bannar.png"); } else { this.bannarsrc = require("@/assets/images/bannar-big.png"); } }
mounted() { this.changeBannarImage(); window.onresize = () => { this.changeBannarImage(); }; }
但是当一次性要替换的图片过多时，比如给菜单这种很多图片进行赋值，那显然一个个的去写赋值肯定不行，于是可以使用for循环去赋值，但是由于require不能对变量进行赋值，于是要使用拼接的方式，这里我创建一个中间变量用来表示图片名称。
data结构如下
<script> export default { data() { return { menuList: [ { menuName: "公司章程", messageCount: "", menuMethod: "articles", src: "", }, { menuName: "消息通知", messageCount: 13, menuMethod: "message", src: "", }, { menuName: "待办中心", messageCount: 9, menuMethod: "dealt", src: "" }, { menuName: "新闻中心", messageCount: "", menuMethod: "news", src: "" }, { menuName: "知识平台", messageCount: "", menuMethod: "knowledge", src: "", }, { menuName: "计划任务", messageCount: 9, menuMethod: "plan", src: "" }, { menuName: "排班", messageCount: "", menuMethod: "scheduling", src: "", }, { menuName: "申请", messageCount: "", menuMethod: "apply", src: "" }, { menuName: "考勤&行政", messageCount: "", menuMethod: "attendance", src: "", }, ], menuSrc: [ "article{0}.png", "message{0}.png", "todo{0}.png", "new{0}.png", "know{0}.png", "plan{0}.png", "scheduling{0}.png", "apply{0}.png", "attendance{0}.png", ], }; }, }; </script>
适配时代码如下
changeMenuImage() { const menu_list = this.menuList; const phone = 414; //手机 const ipad = 768; //ipad //const ipadpro = 1024 //ipadpro let zoom = ""; if (document.body.clientWidth <= phone) { zoom = "1x"; } else if ( document.body.clientWidth > phone && document.body.clientWidth <= ipad ) { zoom = "2x"; } else { zoom = "3x"; } for (let index = 0; index < menu_list.length; index++) { const element = menu_list[index]; const src = this.menuSrc[index].replace("{0}", zoom); element.src = require(`@/assets/images/${src}`); } },
这样就避免一个个的赋值，即使再多一套图片也只需要多增加一个zoom的值就行