Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to bind the background image in Vue.js?
The value for v-bind:style is just a plain JavaScript object that works upon some rules for binding the content. The value of the background image should be a string. So we can apply or data-bind the background image in Vue.js using the style tag and then defining the backgroundImage URL in it. It will automatically retrieve the url from the string and then display the same data content on the browser webpage.
To access the background image, make a div element and define the background image in it with url. The url will be retrieved from the JS file.
Example
Copy and paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Defining image link
new Vue({
el: "#app",
data: {
image:"https://store-images.s-microsoft.com/image/apps.2366.9007199266518672.0607cbef-4e96-49c1-b02c-2432d9fc4826.e2043c6d-d6c4-49ed-8199-cc06665e9e9f"
}
})
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="app">
<div class="circular"
:style="{ backgroundImage: 'url(' + image + ')' }">
</div>
</div>
<script src='app.js'></script>
</body>
</html>
FileName – styles.css
Directory Structure -- $project/public -- styles.css
.circular{
width: 200px;
height: 200px;
background-size: cover;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
Let’s now create a single complete program using the above three files- app.js, index.html and styles.css. We can run this code as an HTML program.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.circular {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="circular" :style="{ backgroundImage: 'url(' + image + ')' }"> </div>
</div>
<script>
// Defining image link
new Vue({
el: "#app",
data: {image: "https://store-images.s-microsoft.com/image/apps.2366.9007199266518672.0607cbef-4e96-49c1-b02c-2432d9fc4826.e2043c6d-d6c4-49ed-8199-cc06665e9e9f" }
})
</script>
</body>
</html>
In this article, we demonstrated how to bind the background image in Vue.js. To perform this task we created app.js and index.html and styles.css files and included app.js and styels.css files in the index.html file using <script> tag. Finally, we created a complete code by combining app.js, styles.css and index.html as a single HTML file.
5K+ Views
