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?

https://i.sstatic.net/7od4u.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

guide on launching react with pure javascript

Is it feasible to operate react "straight out of the box" using only JavaScript? In essence, I am seeking a way to utilize react by simply utilizing notepad to create the page (without needing to install and configure node etc.). More specifically - 1) ...

javascripthtmlreactjs

Utilizing JSON and AJAX to mine data from databases

I've been working on creating a basic "search" box using Javascript, AJAX, PHP, and JSON. I'm focusing on the "world" database that I downloaded from the MySQL website for this particular project. I've hit a roadblock when trying to retrieve ...

javascriptphpmysqljsonajax

What is the process for assigning an element to a specific URL ID?

Imagine having an array of objects structured like this: [{ details: {id: 7}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: 8}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: ...

javascriptreactjs

Utilizing previously written HTML code snippets

While working on a page within a legacy application, I find myself repeatedly reusing a large HTML block of code. The entire HTML and JavaScript codebase is quite old. The specific HTML block in question spans over 200 lines of code. My current strategy in ...

javascriptjqueryhtml

Feed JSON data into a jQuery function using JavaScript

A rudimentary Google Apps Script Web App has been created with the sole purpose of displaying JSON data in an HTML drop-down list. The JSON file is stored in Google Drive. Code inspiration taken from: http://jsfiddle.net/manoj_admlab/Mta5b/3/ However, we ...

javascriptjqueryhtmljsongoogle-apps-script

Storing information within a global variable array or exploring alternative methods

I am currently working on a project in electron / node.js and need assistance with the following tasks: Importing data from excel/csv files Visualizing the data using d3.js Cleaning the data by removing duplicates, etc. Using the data for calcu ...

javascriptnode.jsarrayselectronglobal-variables

Vue-Superagent.post does not exist as a valid function in this context

While attempting to upload a file using vue-superagent, I encountered an issue with my code. Previously functional, I am now receiving the following error message: vue_superagent__WEBPACK_IMPORTED_MODULE_5___default.a.post is not a function //@ts-ig ...

node.jsexpressvue.jssuperagent

Authenticating child in Azure JWT token using the kid value hardcoded

As I obtained an Azure token, I decided to verify it by checking the kid in the header. I decoded the token on jwt.io and hardcoded the kid into my code for future tokens. However, after a few days, the public keys were updated, rendering the previous kid ...

javascriptnode.jsjwtazure-active-directory

Incorporate a new tab based on specific conditions in Excel 2016/365 using office add-ons (Javascript API)

I am currently in the process of developing an Office Add-in for Excel that requires the addition of a worksheet conditionally. I need to ensure that if the worksheet is not already present, it must be added and filled. If it already exists, I just need to ...

javascriptexcelapi

Check if the element is not present in the array, then add it to the array

I am attempting to generate an array in JavaScript with unique elements extracted from a JSON feed. My thought process is possibly too influenced by PHP, where a simple script like the one below would suffice: $uniqueArray = array(); foreach($array as $ke ...

javascriptjqueryarraysajax

Enhancing your Selenium test case strategies for better performance

I've created a test case that compares two arrays, removing matching elements and throwing an exception for non-matching ones. Although it's functional, the test is quite long and messy. Can anyone suggest ways to optimize or improve it? System ...

javascripttestingideseleniumautomated-tests

Managing numerous API requests in React Native

As I work on implementing a search field, I've encountered a challenge. Whenever a user enters text in the search field, a timer resets to 300 ms before an API call is sent to fetch autocomplete results. After receiving these results, the app then wai ...

javascriptjsonnetworkingreact-native

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

javascripthtmlangulartypescriptangular2-template

Is there a way to format text so that it aligns both to the left and right?

Currently I am working with Vue 2 and using Vuetify 2.2.11. I want to place two texts inside the v-app-bar, with one on the left and the other on the right. Can someone guide me on how to achieve this? This is my existing code: <template> <v-ap ...

vue.jsvuetify.js

Copy both the image and JSON object to the clipboard

I am attempting to utilize the clipboard API to write an image and JSON object to the window clipboard. I am working with Vue and Electron and have successfully written an image and plain text, but I encounter an error when trying to write a JSON object: ...

javascriptjsonvue.jselectronclipboard

How to prevent horizontal scrolling on the right side of a div element

Greetings! I am relatively new to coding and currently facing an issue with stopping horizontal scrolling when the second div is fully visible on the screen (while keeping the third div hidden). Here is the code snippet I have been working on: $(docum ...

javascriptjquery

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

javascriptcssreactjsmaterial-ui

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

javascriptcssnode.jsexpressroutes

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss