代码之家 › 专栏 › 技术社区 › etranz

如何使用v-if语句在vuejs中显示静态图像

vue.js image

0

etranz · 技术社区 · 4 年前

如果vuejs中没有上载图像,我希望显示静态图像。

密码

<img :src="sub_section.imageURL ? sub_section.imageURL: '@/assets/images/upload.png'"  alt="">

但它不起作用。我该怎么做呢?

2 回复 | 直到 4 年前

1

2

Shreeraj 4 年前

如果你想用 v-if 具体来说,您不需要使用 ternary 操作人员您可以尝试使用以下方法显示默认图像: 和 v-else .

<img v-if="sub_section && sub_section.imageURL" :src="sub_section.imageURL" alt="uploaded-image">
<img v-else src="@/assets/images/upload.png"  alt="default-image">

sub_section imageURL 两个 v-if 块将被执行,否则将通过执行来显示默认图像 v-else 块

您需要确保对这两种情况都应用了条件 分节 图像URL 分节 如果您直接使用 sub_section.imageURL 在这种情况下。

2

0

Amaarockz 4 年前

试试这个

<img :src="sub_section.imageURL ? require(sub_section.imageURL): require('@/assets/images/upload.png')"  alt="">

3

0

Woohaik 4 年前

data .

data(){
    return {
        defaultImage: require('@/assets/images/upload.png')
    }
}

在组件中:

<img :src="sub_section.imageURL ? sub_section.imageURL: defaultImage" >