Menu
Can someone help me with using the img tag with vue.js?
Per the vue.js documentation, I tried:
<img v-bind:src={{ imgURL }}> //prints a null image
Here is my jsfiddle
Can someone help?
841
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.
Aug 29, 2022. You can dynamically control the image an <img> tag displays using the v-bind:src , or :src for short, binding. This allows you to insert JavaScript in the attribute field.
The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
If you want to use it directly in Vue template we can do it like this. We have directly used the image from the assets folder in our vue template. Here we are using the relative path "./assets/photo. jpeg" , it will get replaced by an auto-generated URL based on the Webpack output configuration.
You need to remove the double bracket:
<img :src=imgURL>
You bind it with shorthand syntax, so we don't need 'v-bind' or '{{}}' braces, its beauty of VUE JS, ':' is used to bind.
56
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
