vue2.0如何动态绑定img的src属性(三元运算)

更新时间：2024年08月30日 09:19:22 作者：写代码的拉克丝

这篇文章主要介绍了vue2.0如何动态绑定img的src属性(三元运算)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue2.0动态绑定img的src属性(三元运算)

在vue项目中，如果需要动态判断img的src地址方法如下：

方法一

在标签里进行三元运算符判断的时候，引用地址外层需要加require()

require 函数在构建时会解析图片路径，并将图片打包到正确的位置。

使用 require 可以确保路径在打包时正确解析。

<img :src="checkResult.result?require('@/assets/images/passed_big.png'):require('@/assets/images/passed_big2.png')" alt="">

方法二

使用computed属性来动态计算img的src路径

<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>

方法三

动态import可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块

<template>
  <div>
    <img :src="getImageSrc" alt="">
  </div>
</template>

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');
  }
};

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

前端虚拟滚动列表实现代码(vue虚拟列表)
前端的性能瓶颈那就是页面的卡顿,当然这种页面的卡顿包含了多种原因,下面这篇文章主要给大家介绍了关于前端虚拟滚动列表实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-06-06
ant-design-vue中的table自定义格式渲染解析
这篇文章主要介绍了ant-design-vue中的table自定义格式渲染，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue项目刷新当前页面的三种方式(重载当前页面数据)
这篇文章主要介绍了vue项目刷新当前页面的三种方式(重载当前页面数据),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
vue ant design 封装弹窗表单的使用
这篇文章主要介绍了vue ant design 封装弹窗表单的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue表单输入绑定的示例代码
这篇文章主要介绍了Vue表单输入绑定的示例代码，本文使用v-model指令在表单input创建双向数据绑定，非常具有实用价值，需要的朋友可以参考下
2018-11-11
vue.js修改el-popover组件显示位置
el-popover是一个基于element-ui框架设计的,用于浮动展示提示或菜单的UI组件,下面这篇文章主要给大家介绍了关于vue.js修改el-popover组件显示位置的相关资料,需要的朋友可以参考下
2023-06-06
基于vue.js的分页插件详解
这篇文章主要为大家详细介绍了基于vue.js的分页插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Vue Axios异步与数据类型转换问题浅析
总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路，Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，主要作用就是实现AJAX异步通信
2023-01-01
Vue.js每天必学之表单控件绑定
Vue.js每天必学之表单控件绑定，如何在表单控件元素上创建双向数据绑定，感兴趣的小伙伴们可以参考一下
2016-09-09
vue使用openlayers创建地图
这篇文章主要为大家详细介绍了vue项目中使用openlayers创建地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04