CODEWITHSUNDEEP
javascriptvue.js
HMR
HMR

Reputation: 39250

vue dynamic image binding

The original code used an image in a menu like so:

<img
  :alt="$t('more')"
  class="mobile-plus-content visible-xs"
  src="../../../assets/img/plus79.png"
/>

This compiles to:

src="data:image/png;base64,the image"

I changed it to:

v-bind:src="mobileImage(id)"

And in my script:

methods: {
  mobileImage(id) {
    console.log('id:', id);
    return logic ? plus : minus;
  },

It logs the id but I don't know what to return here. Where should I put the png because vue is no longer compiling it into static resources?

Upvotes: 0

Views: 63

Answers (2)

PeeJee
PeeJee

Reputation: 696

Just FYI. You can also use require in the template tag: 

<template>
  <div>
    <img v-if="isMenuOpen(id)" :src="require('@/assets/img/minus-1.png')"/>
    <img v-else :src="require('@/assets/img/plus79.png')"/>
  </div>
</template>

Upvotes: 1

HMR
HMR

Reputation: 39250

In script I did:

const minus = require('@/assets/img/minus-1.png');
const plus = require('@/assets/img/plus79.png');

and in mobileImage:

return this.isMenuOpen(id)
  ? minus
  : plus;

Upvotes: 0

Related Questions