How to Pass Variable to Inline Background Image in VueJS ?
Last Updated :
22 Jul, 2024
In this article, we will learn how we can pass variables to inline background images in VueJS. We will explore two different approaches with practical implementation in terms of examples and outputs.
Using :style Binding
In this approach, we are using the :style binding to dynamically pass the imageUrl variable to the inline background image. This makes sure that the background image is dynamically updated based on the value of the imageUrl variable.
Syntax:
<div :style="{ property1: value1, property2: value2, ... }"></div> Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<!-- VueJS CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<style>
.image-container {
width: 300px;
height: 200px;
background-size: cover;
background-position: center;
margin-top: 10px;
}
.feedback-message {
color: green;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="app">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Approach 1: Using
:style Binding
</h3>
<label for="imageUrl">
Enter Image URL:
</label>
<input v-model="imageUrl"
type="text" id="imageUrl"
placeholder="Enter Image URL">
<button @click="resetImage">
Reset to Default
</button>
<div :style=
"{ backgroundImage: 'url(' + imageUrl + ')' }"
class="image-container">
</div>
<p v-if=
"imageUrl !== defaultImageUrl"
class="feedback-message">
Background Image Changed!
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
imageUrl:
'https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png',
defaultImageUrl:
'https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png',
},
methods: {
resetImage() {
this.imageUrl = this.defaultImageUrl;
},
},
});
</script>
</body>
</html>
Output:
Using :class Binding
In this approach, we are using the :class binding. The background image is dynamically changed based on the user's click. The variable selectImg is updated through the button clicks and determines which predefined background image class to apply.
Syntax:
<div :class="{ 'class-name': condition, 'another-class': anotherCondition }"></div> Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Example 2
</title>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<style>
.background-image {
width: 300px;
height: 200px;
background-size: cover;
background-position: center;
}
#app{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.image-1 {
background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png');
}
.image-2 {
background-image:
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210908212955/Get-Hired-With-GeeksforGeeks-GFG-Job-Portal.png');
}
.image-3 {
background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg');
}
</style>
</head>
<body>
<div id="app">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Approach 2: Using
:class Binding
</h3>
<div :class="{
'background-image': true,
'image-1': selectImg === 'image-1',
'image-2': selectImg === 'image-2',
'image-3': selectImg === 'image-3'
}">
</div>
<div>
<button @click="selectImage('image-1')">
Image 1
</button>
<button @click="selectImage('image-2')">
Image 2
</button>
<button @click="selectImage('image-3')">
Image 3
</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selectImg: 'image-1'
},
methods: {
selectImage(image) {
this.selectImg = image;
}
}
});
</script>
</body>
</html>
Output:
Similar Reads
How to Bind the Background Image in VueJS ? In VueJS, the background images can be set from different types of properties like data property, computed property, or directly from an image source. In this article, we will see the different approaches to bind the background image in VueJS as listed below: Table of Content Using Inline StyleUsing
2 min read
How to set Background Image in react-native ? In this article, we will see how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it. Setting background images requires using the ImageBackground component in React Native. You can style it further to adapt to different s
5 min read
How to set a Background Image With React Inline Styles ? Setting a background image with React inline style is a straightforward method of using the images as background to enhance the UI of the wen application.How to Set Background Image in React ?To set background image with react inline styles we will be using the style attribute. This style attribute
2 min read
How to Set Background Images in ReactJS Setting the background images in React improves the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients. In this tutorial, we will look at different methods to apply background images to your react application. How to Set
4 min read
How To Set The Height And Width Of Background Image Inline Style In React? In React, while handling styles dynamically you might encounter setting a background image with specific dimensions using inline styles. While CSS stylesheets are generally preferred for styling, there are cases where inline styles make more sense, such as when you need to apply dynamic values or wo
3 min read
How to check an image is loaded or not in VueJS ? While inserting an Image in a VueJS project, it may fail to load due to the following reasons: Writing wrong image URL.Due to poor connection Approach: We are going to use an event in <img> to check whether an image is loaded or not in VueJS, the event we are going to use is: @load: The @load
3 min read