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