Conditional image source with Vue based on boolean value

Question

I currently have my image tag set up like so:

<img v-if="highQuality" :src="post.data.url">
<img v-if="highQuality == false" :src="post.data.thumbnail">

As you can see the image src changes based on whether highQuality is true or false.

I have a select tag with the two bool options, if I start on false and change it to true it updates the images to high quality sources, but if I set it back to false it seems to stay on High quality. So I'm thinking that this is a bad attempt at a vue if conditional.

is there a more "Vue" like way of writing this?

edit: extra code

DOM

<select v-model="highQuality">
     <option value="true">High Quality</option>
     <option value="false">Low Resolution</option>
</select>

JS

var app = new Vue({
        el: '#app',
        data: {
            highQuality: false,
            posts: [],
        },
});

Are you sure the select tag is properly changing the value of highQuality? Can you show some of its code? — acdcjunior
– acdcjunior, Commented Jun 16, 2019 at 2:37
@acdcjunior Its toggled with a select and its working because I tested it by modelling the value inside some text and its changing but its not changing the src URL. If I start at low quality and flick to hi quality it works but I cant switch back I have refresh — Ari
– Ari, Commented Jun 16, 2019 at 4:58

Decade Moon · Accepted Answer · 2019-06-16 03:41:07Z

2

Maybe the highQuality == false condition is failing, are you sure you're setting highQuality to exactly false?

You needn't duplicate the tag, just do this instead:

<img :src="highQuality ? post.data.url : post.data.thumbnail">

answered Jun 16, 2019 at 3:41

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

Comments

acdcjunior · Accepted Answer · 2019-06-16 06:27:59Z

The problem is your <option>s. <select> is assigning a string, not a boolean.

Don't use:

<option value="true">High Quality</option>

Use:

<option :value="true">High Quality</option>

Problematic:

var app = new Vue({
  el: '#app',
  data: {
    highQuality: false,
    posts: [],
    post: {data: {url: 'http://bc.id.au/images/fr_flag.gif', thumbnail: 'http://bc.id.au/images/de_flag.gif'}}
  },
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select v-model="highQuality">
     <option value="true">High Quality</option>
     <option value="false">Low Resolution</option>
  </select>

  <img v-if="highQuality" :src="post.data.url">
  <img v-if="highQuality == false" :src="post.data.thumbnail">
</div>

Fixed:

var app = new Vue({
  el: '#app',
  data: {
    highQuality: false,
    posts: [],
    post: {data: {url: 'http://bc.id.au/images/fr_flag.gif', thumbnail: 'http://bc.id.au/images/de_flag.gif'}}
  },
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select v-model="highQuality">
     <option :value="true">High Quality</option>
     <option :value="false">Low Resolution</option>
  </select>

  <img v-if="highQuality" :src="post.data.url">
  <img v-if="highQuality == false" :src="post.data.thumbnail">
</div>

Collectives™ on Stack Overflow

Conditional image source with Vue based on boolean value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related