Vue Js Img Src: Vue.js is a progressive JavaScript framework used for building user interfaces. One of the commonly used features in Vue.js is the “img” tag, which is used to display images on a web page. The “src” attribute of the “img” tag specifies the URL of the image file to be displayed. The value of the “src” attribute can be a relative or absolute URL. When a user loads a Vue.js application that contains an “img” tag with a valid “src” attribute, the browser sends a request to retrieve the image file from the specified URL and then displays it on the web page.
How can you dynamically bind the source attribute of an img element in Vue.js using the v-bind directive?
This code is using Vue.js to display an image with a specific source URL.
The div element with an id of app serves as the root element for the Vue application.
The h3 element displays the text “Vue Js Img Src”.
The img element uses Vue’s v-bind directive (abbreviated as :) to bind the src attribute to the imageSrc data property, which is set to the URL of the Vue.js logo image. The alt attribute provides alternative text for screen readers and in cases where the image cannot be displayed.
Vue Js img src example
<div id="app">
<h3>Vue Js Img Src</h3>
<img :src="imageSrc" alt="My Image">
</div>
<script>
new Vue({
el: '#app',
data() {
return {
imageSrc: 'https://vuejs.org/images/logo.png'
}
},
});
</script>
Output of Vue js img src
