Vue.js image src binding / switch statement

Question

new to Vue.js, wondering if this code I have written is valid and would function as expected. I am working on a project that has numerous "brands" so based on the brand name that is coming from vue.store the image related to that brand would show. This works when binding class to an element but I have not yet tried with :src binding images based on switch case. Is there a better way to achieve this?

HTML:

  <img :src="brandImg" class="brandImgOne" alt=brand "image" />

js:

computed: {
   brandImg() {
      let brandImg = '';
      let thisBrand = this.$store.state.ui.theme.brand;
      switch (thisBrand) {
          case 'brandOne':
          brandIcon = '/img/iconOne.png';
          break;
          case 'brandTwo':
          brandIcon = '/img/iconTwo.png';
          break;
          case 'brandThree':
          brandIcon = '/img/iconThree.png';
          break;
          default:
          console.warn('not configured`);
          break;
      }
         return brandIcon;
     }
   }

Hi!, i dont know what do you want with that alt in the <img> And yes probably, will work, make the return in the case case 'brandOne': return '/iconOne.png'; But doesnt matter — Ignacio
– Ignacio, Commented Jan 22, 2020 at 14:57
@Ignacio, thank you for the input :)...the alt was a typo...lol...yes this seems to work fine with the brand pages. Thanks again! — hendy0817
– hendy0817, Commented Jan 22, 2020 at 15:06

Matheus Frez · Accepted Answer · 2020-01-22 17:17:28Z

4

You have to return the values on the switch like this:

computed: {
   brandImg() {
      let brandImg = '';
      let thisBrand = this.$store.state.ui.theme.brand;
      switch (thisBrand) {
          case 'brandOne':
          return '/img/iconOne.png';
          case 'brandTwo':
          return '/img/iconTwo.png';
          case 'brandThree':
          return '/img/iconThree.png';
          default:
          console.warn('not configured`);
          break;
      }
     }
   }

answered Jan 22, 2020 at 17:17

Matheus Frez

3242 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Vue.js image src binding / switch statement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related