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?

javascriptvue.js

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

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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Press `Enter` to confirm your selection in the BootstrapVue message box input box

Using Vue version v2.6.12 BootstrapVue version v2.21.2 Is there a way to confirm by pressing Enter instead of manually clicking OK? let text this.$bvModal.msgBoxConfirm(<input vModel={text} />) ...

javascriptvue.jsvuejs2jsxbootstrap-vue

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag. Previously, the <a> tag was written like this: <a type="button" class="uk-button uk-button-link" href="#e ...

cssvue.js

Is there a way to retrieve the current map center coordinates using the getCenter function in @react-google-maps/api?

I am currently working with the GoogleMap component provided by @react-google-maps/api, but I am struggling to figure out how to obtain the latitude and longitude coordinates of the map's center after it has been moved. After some research, I came ac ...

javascriptreactjsreact-google-maps

Encountering a problem while deploying Vue to GitHub Pages due to issues with vue-router

I encountered some difficulties while deploying a Vue application built with vue-cli v3.0 to GitHub Pages. I utilized subtree to only deploy the dist folder to the gh-pages branch. Initially, the issue was that the assets were not being found, but I resolv ...

vue.jsgithub-pagesvue-routervue-cli

Displaying nested object properties in HTML through iteration

What is the correct way to access them if item.NestObj.textpropertyVal is showing incorrect? success: function(data){ var html = ""; $.each(data.mainOutterObj, function (index, item) { html += "<ul&g ...

javascriptjqueryjson

The componentDidMount lifecycle method of a rendered component in a Route is not being triggered

IMPORTANT: SOLUTION PROVIDED BELOW, NO NEED TO READ THROUGH THE QUESTION I am utilizing the following Router with react-router 4 return ( <Router> <Page> <Route exact path="/" component={HomePage} /> <Route path="/c ...

javascriptreactjsreact-routerreact-router-v4

Next.js is having trouble identifying the module '@types/react'

Every time I attempt to launch my Next.js app using npm run dev, an error notification pops up indicating that the necessary packages for running Next with Typescript are missing: To resolve this issue, kindly install @types/react by executing: np ...

javascriptreactjstypescriptnpmnext.js

Solving the issue of image paths within external SCSS files in Nuxt.js

Trying to organize my component scss files separately from their Vue components has been a bit challenging. I also have a GLOBAL scss file that is not scoped, but no matter which approach I take, I can't seem to get the image paths in /assets or /stat ...

javascriptwebpackvue.jsnuxt.js

Is There a Way to Abandon a route and Exit in Express during a single request?

In order to ensure proper access control for the application I was developing, I structured my routing system to cascade down based on user permissions. While this approach made sense from a logical standpoint, I encountered difficulties in implementing it ...

javascriptexpress

Delaying Variable Assignment in Node.js until Callback Function Completes

I am currently working with Node.js, Express, MongoDB, and Mongoose in my project. One specific task involves fetching the largest id number of a document from the MongoDB database and passing it back to the program. To better organize my code, I moved thi ...

javascriptnode.jsmongodbexpressmongoose

New Relic identifies mysterious delays caused by MongoDB's findOne method

After setting up newrelic to pinpoint the bottlenecks in my app, I discovered a major issue that has left me stumped. The source of most delays seems to be mongoDB user.findOne, but the biggest challenge is locating where in the code this delay is occurri ...

javascriptnode.jsmongodbexpressnewrelic

Encountered a snag with submitting data via AJAX: received an error message stating

I created this custom script for a contact form on my website, and it seems to be working fine. However, I'm encountering an issue where instead of storing the data in my database, all I get is [object HTMLCollection]. Can someone please explain wh ...

javascriptjqueryajax

Encountering a data property error while trying to render ejs using axios

I am encountering an error message "TypeError: Cannot read property 'data' of undefined" when trying to display results.ejs using data from an API. Can someone help me identify what's incorrect with the rendering code? Thank you. index.js: ...

javascriptnode.jsexpressaxios

Issue: Unable to locate the module 'babel-code-frame' in VUEJS (ESLINT)

Here are the current versions: -npm: 6.14.4 -node: v10.19.0 -eslint: v5.0.1 -linux: ubuntu 20.04 This is my script: vue create vue1 cd vue1 npm run serve This is my package.json: { "name": "vue1", "version": "0. ...

javascriptvue.jseslintpackage.jsonvue-cli

Ng-Repeat is generating empty list items

When I view this code in my browser, I see two list items, but there is no content displayed within them. The loop seems to be functioning correctly, but the items are not pulling any information from my list. I have revised my submission to accurately re ...

javascriptangularjs

Utilizing a variable string name for a method in Typescript Vue

My objective is to trigger a different function based on the value of a variable. However, when working in VS Code, I receive an error message that states: 'method' implicitly has a type of 'any' because 'type1Func' and &apos ...

typescriptvue.jsvuejs2

The Quasar test fails to locate elements with a name tag>null<

I've encountered a strange issue while trying to conduct unit tests on my Quasar application. The problem seems to be that the test is unable to locate elements with the name tag, except for the q-route-tab components. I've experimented with diff ...

unit-testingvue.jsjestjsquasar

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

I am currently developing a server using expressjs: 'use strict'; var express = require('express'); var logger = require('morgan'); var path = require('path'); var bodyParser = require('body-parser'); va ...

javascripthtmlcssexpress

The UNHANDLEDREJECTION callback was triggered prematurely during asynchronous parallel execution

Asynchronously using parallel to retrieve data from the database in parallel. Upon each task returning the data, it is stored in a local object. In index.js, the cacheService.js is called. Inside cacheService.js, data is loaded from both MySQL and MongoDB ...

javascriptnode.jsasync.js

Encountering an issue with Meteor and node-celery: "Unable to access property 'slice' of null"

Check out the Github repository for reproducing this issue Run localhost:3000 to replicate the problem. In my setup with Meteor 1.4.4.1, I am utilizing the node-celery npm packages on the server side. Upon Meteor initialization, the client automatically i ...

javascriptnode.jsmeteorcelery