vue dynamic image binding

Question

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?

PeeJee · Accepted Answer · 2020-02-24 12:05:12Z

1

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>

answered Feb 24, 2020 at 12:05

PeeJee

6969 silver badges24 bronze badges

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

Comments

HMR · Accepted Answer · 2020-02-24 10:40:13Z

0

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;

answered Feb 24, 2020 at 10:40

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Collectives™ on Stack Overflow

vue dynamic image binding

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