目录vue2.0动态绑定img的src属性(三元运算)在vue项目中，如果需要动态判定img的src地址 方法如下： 方法一在标签里举行三元运算符判定的时间，引用地址外层需要加require() [code]require[/code] 函数在构建时会剖析图片路径，并将图片打包到正确的位置。 使用 require 可以确保路径在打包时正确剖析。 [code]<img :src="checkResult.result?require('@/assets/images/passed_big.png'):require('@/assets/images/passed_big2.png')" alt="">[/code]方法二使用computed属性来动态盘算img的src路径 [code]<template> <div> <img :src="getImageSrc" alt=""> </div> </template> <script> export default { data() { return { checkResult:true }; }, computed: { getImageSrc() { return this.checkResult ? require('@/assets/images/passed_big.png') : require('@/assets/images/passed_big2.png'); } } }; </script> <style scoped> /* 你的样式 */ </style> [/code]方法三动态[code]import[/code]可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块 [code]<template> <div> <img :src="getImageSrc" alt=""> </div> </template>[/code] [code]export default { data() { return { checkResult:true imageSrc: '' }; }, async created() { this.imageSrc = this.checkResult ? await import('@/assets/images/passed_big.png') : await import('@/assets/images/passed_big2.png'); } };[/code]总结以上为个人履历，盼望能给各人一个参考，也盼望各人多多支持脚本之家。 来源：https://www.jb51.net/javascript/326708e9s.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:32 , Processed in 0.034903 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
