vue | 解决img绑定data中储存img地址及三目运算符切换不同地址无法显示的问题

用户叫作Rabby

于 2023-12-29 10:16:37 发布

阅读量630

点赞数 9

CC 4.0 BY-SA版权

分类专栏：小tips 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_51464636/article/details/135284623

小tips 专栏收录该内容

22 篇文章

订阅专栏

文章讲述了在Vue.js项目中，如何解决img标签无法显示绑定数据中存储的图片地址的问题，包括使用`import`导入图片和通过三目运算符动态切换src路径的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅记一下，怕忘。

img绑定data中储存img地址无法显示

使用 import 导入即可

import apply1 from "../apply/assets/img/apply1.png";
data(){
	return {
		 menuList: [
        { index: '1',  imgSrc: [apply1] },
        ]
	}
}

三目运算符切换不同地址无法显示

<template>
  <img :src="imageSrc" >
</template>

<script>
export default {
  data() {
    return {
      someValue: true
    };
  },
  computed: {
    imageSrc() {
      // 使用三目运算符来计算src的值
      return this.someValue ? 'path/to/image1.jpg' : 'path/to/image2.jpg';
    }
  }
};
</script>