Vue动态设置图片时src不生效的原因及解决方法
原因分析
在vue项目中动态设置img的src时,图片会加载失败。我们可以先看个例子。
<template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? '../assets/vue-logo.png' : '../assets/react-logo.png' " /> <div> <button @click="changeLogo">切换</button> </div> <h5>图片二</h5> <img :src="imgUrl" /> </div> </div> </template> <script> export default { name: "ImgTest", data() { return { logoFlag: "vue", imgUrl: "../assets/vue-logo.png", }; }, methods: { changeLogo() { this.logoFlag = this.logoFlag === "vue" ? "react" : "vue"; }, }, }; </script> <style scoped> img { width: 50px; height: 50px; } </style>
由结果可以看出图片加载失败。
查看elements之后会发现,src被当做静态资源处理了,并没有进行编译。
解决方法
为了解决动态的src没有进行编译的问题,我们可以使用require引入图片。
<template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? require('../assets/vue-logo.png') : require('../assets/react-logo.png') " /> <div> <button @click="changeLogo">切换</button> </div> <h5>图片二</h5> <img :src="imgUrl" /> </div> </div> </template> <script> export default { name: "ImgTest", data() { return { logoFlag: "vue", imgUrl: require("../assets/vue-logo.png"), }; }, methods: { changeLogo() { this.logoFlag = this.logoFlag === "vue" ? "react" : "vue"; }, }, }; </script> <style scoped> img { width: 50px; height: 50px; } </style>
可以看到使用require引入图片之后,图片就可以正常加载出来了。
import和require的区别
require是在运行时加载,而import是编译时加载;
如果希望使用import引入图片就需要提前导入图片。
<template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? require('../assets/vue-logo.png') : require('../assets/react-logo.png') " /> <div> <button @click="changeLogo">切换</button> </div> <h5>图片二</h5> <img :src="imgUrl" /> </div> </div> </template> <script> import reactLogo from "../assets/react-logo.png"; export default { name: "ImgTest", data() { return { logoFlag: "vue", imgUrl:reactLogo, }; }, methods: { changeLogo() { this.logoFlag = this.logoFlag === "vue" ? "react" : "vue"; }, }, }; </script> <style scoped> img { width: 50px; height: 50px; } </style>
另外require和import另外的区别:
require是CommonJs/AMD规范,而import是ESMAScript6+规范。
到此这篇关于Vue动态设置图片时src不生效的原因及解决方法的文章就介绍到这了,更多相关Vue动态设置图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vuex通过getters访问数据为undefined问题及解决
这篇文章主要介绍了vuex通过getters访问数据为undefined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08vue-router(this.$router)如何在新窗口打开路由跳转页面
这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12浅谈ElementUI中switch回调函数change的参数问题
今天小编就为大家分享一篇浅谈ElementUI中switch回调函数change的参数问题,具有很好的价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论