使用Vue的条件渲染和计算属性判断有无图片

判断有无遍历出图片,如果无就显示本地上传的默认图片

<view class="card-body">
  <image :src="activity.coverUrl" alt="activity cover"/>
</view>

要在Vue.js中实现在没有遍历出图片时显示默认图片,你可以使用Vue的条件渲染和计算属性。首先,你可以创建一个计算属性来判断是否存在activity.coverUrl,如果存在则返回该URL,否则返回默认图片的URL。然后,在模板中使用条件渲染来根据计算属性的结果显示对应的图片。

代码:

<template>
  <view class="card-body">
    <img :src="coverImage" alt="activity cover" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      activity: {
        coverUrl: null, // 假设coverUrl是活动封面图片的URL
      },
      defaultImageUrl: '默认图片的URL',
    };
  },
  computed: {
    coverImage() {
      return this.activity.coverUrl ? this.activity.coverUrl : this.defaultImageUrl;
    },
  },
};
</script>

 

posted @ 2023-05-25 00:45  is橙子  阅读(195)  评论(0编辑  收藏  举报