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

Question

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.

probably it because your component render faster than you passing image data to twItem, in this case you can define twItem as object something like this twItem: {} — Jazuly
– Jazuly, Commented Oct 24, 2020 at 15:20
@DevCl9 there is no error when I use v-if but it doesn't work. — Daryl Wong
– Daryl Wong, Commented Oct 24, 2020 at 15:50
'is not there' means the url string is an empty string or the url links for an 404 image? — dunhuang
– dunhuang, Commented Oct 24, 2020 at 16:11
@dunhuang when I click on the link clips-media-assets2.twitch.tv/…, I am getting access denied, so it should be access denied. — Daryl Wong
– Daryl Wong, Commented Oct 29, 2020 at 19:37

Iyashi · Accepted Answer · 2020-10-24 15:56:38Z

1

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/

edited Oct 24, 2020 at 15:56

answered Oct 24, 2020 at 15:53

Iyashi

5821 gold badge4 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DevCl9 Over a year ago

this would work (+1). OP may also use this article for more explanation

Iyashi Over a year ago

Thanks, didnt invest time to look for a thoughrough @load explanation. I added it.

DevCl9 · Accepted Answer · 2020-10-24 15:47:13Z

0

Use v-if instead of v-show.

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

edited Oct 24, 2020 at 15:47

DevCl9

3081 silver badge9 bronze badges

answered Oct 24, 2020 at 15:29

michael

4,1733 gold badges15 silver badges31 bronze badges

5 Comments

michael Over a year ago

Ooops, I've just edited my answer. Try again with :v-if. It should work.

DevCl9 Over a year ago

: is a short-hand syntax for v-bind directive (HTML attribute manipulation). You're essentially writing v-bind:v-if= ....

Daryl Wong Over a year ago

:v-if is probably not valid

Iyashi Over a year ago

Yep, not just probably. :v-if is not valid.

Naren Over a year ago

There's no : for directives, user directly instead <div v-if="twItem.imageurl">{{twItem.title}}</div>

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related