How come my dynamic source path doesn't function correctly unless I add an empty string at the end of it?

Recently, I encountered an issue while using Vue.js to dynamically create a source attribute using an object's properties. Here is the code snippet where I faced the problem:

<img :src='"../assets/" + project.image.name + "." + project.image.extension'>

Strangely enough, this code did not work and no errors were logged in the console. However, when I made a slight modification like so:

<img :src='"../assets/" + project.image.name + "." + project.image.extension + ""'>

Surprisingly, it worked perfectly fine. Although the workaround resolved the issue, it still bothers me that I don't fully comprehend why the initial implementation didn't work as expected.

javascriptvue.js

Answer №1

Even the second method may not be effective.

The correct approach is:

computed: {
  imgSrc() {
    return require("./resources/" + this.picture.title + "." + this.picture.format);
  }
},
// <img :src="imgSrc">

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

CSS compatibility across different browsers

Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...

javascriptjqueryhtmlcssfirefox

The dependency graph of npm modules shows significant differences

I've been exploring the capabilities of the npm-remote-ls package to analyze dependency trees for modules. This tool is installed globally on my system. When I execute Command 1: npm-remote-ls object-assign The tree structure displayed is as follows ...

javascriptnode.jsnpmpackage-managers

The AJAX onreadystatechange function may not be consistently triggered

I have an issue with my AJAX call to retrieve XML data. It seems that the code does not enter the onreadystatechange function until the last iterations of my foreach loop. This delay is likely due to the time it takes for the calls to "www.webpage.com/" ...

javascriptajaxxmlreadystateonreadystatechange

Guide to Implementing i18n-iso-countries Library in React

I am currently developing a React application and attempting to utilize the i18n-iso-countries package to retrieve a countries object in English where keys represent iso codes and values represent country names. This process is straightforward in Node.js, ...

javascriptnode.jsreactjsnpm

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

javascripthtmlangulartypescript

The array filtering functionality is not functioning as intended

Struggling with correctly filtering data in JavaScript. Here's an example where var1 = 20, var2 = 10, var3 = 30, var4 = 40. This is the code snippet: var variables = ['var1', 'var2', 'var3', 'var4'], values = [ ...

javascriptarraysnode.jsfilter

Creating an HTML list based on a hierarchical MySQL table structure

I have retrieved a hierarchical table showing different elements and their parent-child relationships as follows: id| name | parent_id | header 1 | Assets | 0 | Y 2 | Fixed Assets | 1 | Y 3 | Asset One | 2 | N 4 | ...

javascripthtmlvue.js

Is there a way to retrieve the information from the v-text-field without using the v-model directive?

<div v-for="i in parseInt(questionCount)" :key="i"> <v-layout> <v-flex xs6 offset-3 mt-15" > <label for=""> Enter question number {{index}}:</label> <v-text-fi ...

javascriptreactjsvue.jsvuejs2vuetify.js

What is the most efficient way to load data just once when a user reaches the bottom of the page?

I am encountering an issue with a webpage that dynamically loads HTML from a PHP script which scraps image links from another site when the user scrolls to the bottom of the page. The problem is that the scraping script takes some time to complete, causing ...

javascriptajaxscrolljquery

What steps should I take to generate a stylized date input in javascript?

Looking to dynamically create a date string in JavaScript with the following format: dd-MMM-yyyy Need the dd part to change between 1 and 29 each time I generate the variable within a loop Month (MMM) should be set as Jan ...

javascriptdate

"The `Head.js` method called `.js()` allows for dynamic

Recently, I came across some code that was passed down to me from work, and it involves making an api call using head.js: head.js( { 'application' : 'someurl.com/foo.js' }); I'm curious if this actually registers the javascript a ...

javascriptdependency-injectionhead.js

Combine loop results into a string using jQuery

When using jQuery, I need to append a multiline string to an element by adding a string return from each value in a for loop. $("songs-table-tr").append('tr id="songs-table-tr'+count+'" style="display: none">\ ...

javascriptjquerystringloops

Hover over buttons for a Netflix-style effect

https://i.stack.imgur.com/7SxaL.gif Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it? This is what I have ...

javascripthtmlcssreactjs

Angular: Card disabled post-click

I am displaying three cards <div *ngFor="let catalog of catalogs;let i=index" (click)="goToProducts(catalog)"> <div> <div class="name-position text {{catalog.classe}}" style="font-size: 21px;"> ...

javascriptangular

Simultaneous Push and Insert operations with Vue.js and PHP

I am looking to add a value into an Array and have it displayed instantly without the need to refresh the entire page. app.todoList.push(this.todo) This line accomplishes that task. Simultaneously, I also want to insert this value into a Database. The i ...

vue.jsaxios

Setting a cookie using express.js with a 'j' prefix

Trying to establish a cookie using res.cookie as shown below: res.cookie('userId',req.user._id); //cookie set here console.log(req.user._id); //correct value returned, eg abc However, I'm noticing j:"abc" in my cookie. What could be the re ...

javascriptnode.jsexpress

Limiting the length of numbers in Material UI

Is there a way to restrict user input to only numbers with a maximum length of 3 in Material UI? <TextField id="score" label="score" className={classes.textField} name="totalScore" margin="normal" defaultValue={score} /> We specifically ...

javascripthtmlreactjsmaterial-ui

Tips on utilizing Jquery to extract an array containing UL, LI, and input elements

I am currently working with five ul lists, each of which may contain an input element. For example: <form id="testForm"> <ul id="1"> <li>TEST</li> <li>Gender: <select id="gender" name="gender"> ...

javascriptjquery

Ways to retrieve targeted keyframes using JavaScript

Trying to access a scoped "keyframes" named move-left in JavaScript. How can I do this while keeping it scoped? Note that vue-loader will add a random hash to move-left, such as move-left-xxxxxxxxx. <template> <div :style="{animation: animati ...

cssvue.jsvuejs2vue-component

Add a variable from a callback function in AJAX's success response

Is there a way to effectively utilize the variable in the appended message of the AJAX success call? http://codepen.io/anon/pen/fdBvn data['name'] = $('#goofy').val(); $.ajax({ url: '/api/1/email/test/', data: data, type ...

javascriptjqueryajax