Menu
I am using vue 2 and vue-cli 3. I am trying to bind the src of an tag to a variable in data.
Specifically I am doing the following:
<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">
export default {
name: "home",
components: {},
data() {
return {
locale: locale // 'en'
};
}
}
The binding works
Using Chrome developer tools and examining the network activity I see that the binding works:
http://localhost:8080/assets/time-comparison-en.png
However the resource is not found.
If I remove data binding at hard code the course path to:
<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">
Vue resolves the resource link to look for the image at:
http://localhost:8080/img/time-comparison-en.74a6f0ca.png
How do I get the Vue to data bind in such a way that it resolves the binding correctly (i.e. time-comparison-en.74a6f0ca.png).
Thanks!
757
To display an image with the img tag in vue, you can use v-bind:src directive, or :src . Or :src for short. Remember that :src expects a JavaScript expression, so if you want to use a string literal in :src you need to wrap the string in quotes.
Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. The v-model directive makes two-way binding between a form input and app state very easy to implement.
In a data binding process, whenever data is changed, it is reflected automatically by the elements bound to the data. The term data binding is also used in cases where an outer representation of data in an element changes, and the underlying data is automatically updated to reflect this change.
If we want to bind any variable, we can simply use Vue. js's double curly braces syntax or “Mustache” syntax to bind any variable from the relative component instance. Or, if we want to bind any variable inside an HTML attribute, we can use the v-bind directive.
Please try require
<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
