creating reactive images with Vue

Question

creating reactive images with Vue

The original code utilized an image in a menu as shown below:

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

This results in:

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

I made a modification to:

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

And within my script:

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

It logs the id, but I am unsure what to return. Where do I need to place the png file since Vue is no longer compiling it into static resources?

javascript vue.js

Answer 1

Answer №1

Just a quick heads up: You have the option to utilize require within the template tag as well:

<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>

Answer 2

Just a quick heads up: You have the option to utilize require within the template tag as well:

<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>

Answer 3

Answer №2

In my code, I included the following:

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

Then, for mobile rendering, I used the logic:

return this.checkIfMenuIsOpen(id)
  ? minusIcon
  : plusIcon;

Answer 4

In my code, I included the following:

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

Then, for mobile rendering, I used the logic:

return this.checkIfMenuIsOpen(id)
  ? minusIcon
  : plusIcon;

creating reactive images with Vue

Answer №1

Answer №2

Similar questions

Is my implementation of Model and Views in backbone.js accurate?

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

What is the best way to activate ui-sref in an AngularJS unit test?

Methods for reloading the requirejs module

What is the best way to trigger UseEffect when new data is received in a material table?

When a user right-clicks on certain words, the menu opens using JavaScript

Utilizing Angular 2's *ngFor to conditionally wrap elements can be compared to organizing a layout with three columns in a Bootstrap row, then starting a

Transform arrays within arrays to objects

Sending two values from an HTML form using Ajax

Using v-model in Vue with jQuery integration

Retrieving custom data attributes from slides within a slick carousel

GetServerSideProps function yielding varied prop values

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

Manipulating rows [using an input field] within a table

How can I customize the font size of a label within a React Material UI Stepper?

Error in RatingBar component: Vue.js 3 and Tailwind CSS not displaying dynamic width correctly

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Guide to Generating Extern for a Constant Variable in Google Closure Compiler (Variable Cannot be Renamed due to Eval)

Restrict the quantity of recommendations provided by the AutoComplete feature

What is the process for modifying the characteristics of an RMWC Component?