Incorporating dynamic numerical values into image names within a Vue JS application

I have linked an image with the following code

<img  title="head" :src="availableParts.heads[selectNextHeadIndex].src"/>

This image is called from a JSON file:

 {
      id: 1,
      description:
        'A robot head with an unusually large eye and teloscpic neck -- excellent for exploring high spaces.',
      title: 'Large Cyclops',
      src: images('./head-big-eye.png'),
      type: 'heads',
      cost: 1225.5,
    },

The image displays with added numbers in the name, as shown in the screenshot. How can I remove the numbers and keep it simple like this head-big-eye.png?

javascriptvue.jsvuejs3

Answer №1

If you want to turn off hashing in your Vue configuration file, you can do so by setting filenameHashing to false.

module.exports = {
  ...
  filenameHashing: false,
}

More information on this topic can be found at https://cli.vuejs.org/config/#filenamehashing

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

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

I'm facing a challenge in my Ember.js application where I need to trigger the opening of a Bootstrap modal from my ApplicationRoute upon calling the openModal action. This is what my ApplicationRoute looks like: module.exports = Em.Route.extend({ ...

javascripttwitter-bootstrapember.js

Transferring the state from a parent component to a child function

I'm having trouble passing a state from a component to a function. I was able to pass the state from Home to ListHome, but I'm struggling to continue passing it to a function within ListHome (Slider) because it's a function. Even after revi ...

javascriptreactjsreact-nativereact-propsreact-state

Sequence of promises: The parent promise does not wait for the child promise to be executed before moving on

I am retrieving data from a particular mongoDB collection. Within that response, I obtain the ID associated with another collection's data and merge it into one cohesive object. Take a look at my code snippet below. It seems like it's not waitin ...

javascriptnode.jsmongodbpromisees6-promise

Execute Javascript to close the current window

When I have a link in page_a.php that opens in a new tab using target="_blank". <a href="page_b.php" target="_blank">Open Page B</a> In page B, there's a script to automatically close the tab/window when the user is no longer viewing it: ...

javascriptphptabsdom-eventsdom-manipulation

Angular5+ Error: Unable to retrieve summary for RouterOutlet directive due to illegal state

When attempting to build my Angular App using ng build --prod --aot, I consistently encounter the following error: ERROR in : Illegal state: Could not load the summary for directive RouterOutlet in C:/Path-To-Project/node_modules/@angular/Router/router.d. ...

javascriptangulartypescriptangular-routerng-build

Can someone suggest a method for deciphering hexadecimal code used in JavaScript?

How can I gain an understanding of this code and convert it into simple javascript? Can someone assist me in deciphering the code or transforming it back to its original script? If someone obfuscated the javascript, what type of method should we use to de ...

javascriptjquery

Is there anybody who can assist me with ${}?

Having an issue with using ${'variable'+i} in a loop function. The goal is to call each function from a loop. Explored template literals but couldn't find a solution for this specific problem. Desired format: ${'variable'+i} // (w ...

javascriptjquery

Exploring methods to trace the factory's property that is receiving updates from another factory within AngularJS

Hey there, I'm new to Angularjs and I have a bunch of factories in my application. The situation is, let's say we have obj1 in factoryA. Whenever I console.log(obj1), it displays numerous properties associated with it. This object is being update ...

javascriptangularjs

The animation function occasionally halts unexpectedly at a varying position

I am facing an issue with an animation function that I have created to animate a list of images. The function takes in parameters such as frames per second, the stopping point, and the list element containing all the images. However, the animation stops un ...

javascriptsetinterval

How come a colon within a function's body does not result in an error in JavaScript?

During my coding journey, I encountered a situation where I was attempting to return an object from an arrow function. However, I noticed that the code snippet below was simply returning undefined. After some investigation, I determined that the curly br ...

javascriptarrow-functions

How can I trigger a mousedown event on mobile devices without using jQuery?

Can I implement a straightforward mousedown/mouseup event in an Angular-based mobile app? While utilizing ngTouch for swiping, I've noticed it lacks support for a 'while-pressed' event. I've found that ngMousedown is ineffective on to ...

javascriptjqueryangularjstouch

What is the method for defining the current date variable within a .json object?

When using a post .json method to send an object, I encounter the following situation: { "targetSigningDate": "2021-09-22T21:00:00.000Z" } The "targetSigningDate" always needs to be 'sysdate'. Rather than manually c ...

javascriptjsontestingpostmanpostman-pre-request-script

What is the best way to trigger a Quasar dialog from an outside component?

Currently, I am working with Vue.js 2.x + Quasar 1.x using http-vue-loader (no build tools required). I have placed a q-dialog in a separate component named MyComponent. However, when I try to include it in a parent component like this: <my-component&g ...

javascriptvue.jsvuejs2frontendquasar-framework

Upon transitioning from typescript to javascript

I attempted to clarify my confusion about TypeScript, but I'm still struggling to explain it well. From my understanding, TypeScript is a strict syntactical superset of JavaScript that enhances our code by allowing us to use different types to define ...

javascripttypescripttsc

Issue with the scope causing global variable not to update when button is pressed

I am facing an issue with a declared variable and jQuery code that is supposed to store a form's value as the value of that variable when a button is clicked, and then execute a function. var verb = ""; $( "#submit" ).click(function() { verb = $(& ...

javascriptjqueryscope

Selecting from a variety of options presented as an array of objects

I am currently working on a component that allows users to select roles: https://i.stack.imgur.com/bnb9Y.png export const MultipleSelectChip = ({ options, label, error, onRolesUpdate, }: Props) => { const theme = useTheme(); const [selected ...

javascriptreactjsmaterial-ui

JavaScript - Modifying several object properties within an array of objects

I am attempting to update the values of multiple objects within an array of objects. // Using a for..of loop with variable i to access the second array and retrieve values const AntraegeListe = new Array(); for (let i = 0; i < MESRForm.MitarbeiterL ...

javascriptarraystypescriptobjectforeach

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

Learn how to dynamically highlight a table row when any changes are made to it using jQuery

Is there a way to automatically highlight the current table row when any input text or image is changed within that specific row using jQuery? In the given code snippet below, with two rows provided, how can one of the rows be highlighted upon modifying ...

javascriptjquerycsshtml

The mdSidenav service encounters difficulties locating a component within an Angular component

Trying to understand why an Angular .component(), which contains a <md-sidenav> directive, cannot be located from the component's controller. Angular throws the error message: No instance found for handle menu The complete component code is ...

javascriptangularjshtmlangularjs-1.5