CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Daryl Wong
Daryl Wong

Reputation: 2443

VueJS: Do not show div if image doesn't exist

I am rendering some div and I have like to not show a div when an image is not there.

An example image is here: https://clips-media-assets2.twitch.tv/AT-cm%7C891283246-preview-480x272.jpg

I am thinking of something like this:

<div v-show="twItem.imageurl">{{twItem.title}}</div>

But it doesn't work. Any help would be appreciated.

Upvotes: 1

Views: 1426

Answers (2)

Iyashi
Iyashi

Reputation: 572

This task is not primitive.

No matter if you use v-if or v-show, both compare the same thing, but the result is different. v-if="false" will not render the element at all, whilst v-show="false" will render it, but hidden. (display: none;)

The problem here is, that you simply check if the twItem.imageurl is set and NOT if the image was loaded.

What you might be able to do is using @load:

<template>
  <div v-if="twItem.loaded">{{ twItem.title }}</div>
  <image :src="twItem.imageurl" @load="twItem.loaded = true">
</template>

See here for a more detailed explanation: https://renatello.com/vue-js-image-loaded/

Upvotes: 1

michael
michael

Reputation: 4173

Use v-if instead of v-show.

<div v-if="twItem.imageurl">{{ twItem.title }}</div>

Upvotes: 0

Related Questions