4👍
try doing this:
<template>
<div :style="bgImg"></div>
</template>
<script>
export default {
data() {
return {
bgImg: {
backgroundImage: `url(${require('../assets/images/0.jpg')})`
}
}
}
}
</script>
1👍
As Mentioned, use a field in data to get the image and link it to your dom.
The template:
<div
class=" login d-flex justify-content-center align-items-center"
:style="{ background: ` center/cover url(${image})` }"
the data object :
data() {
return {
image: require('@/path/to/picture/yourimagehere.jpeg'),
};
},
- [Vuejs]-Passing ID Mitch mech with Django Pattern in Axios, Vue JS
- [Vuejs]-What does `args.unshift(this)` do in Vue's use.js?
1👍
The best way is to load it in beforeMount
lifecycle hook
beforeMount(){
const styles = {
"background": url('../assets/images/0.jpg'),
"background-size": "cover",
"background-repeat": "no-repeat",
};
Object.assign(document.body.style, styles);
}
👤Anis
1👍
<div
class=" search-box car-rims"
:style="{
backgroundImage: `linear-gradient( rgba(255, 255, 255, 1.45), rgba(255, 255, 255, 0.45) ), url(
${require('@/assets/your-image.jpg')})`,
backgroundSize: 'cover',
backgroundRepeat: 'norepeat',
}"
>
</div>
- [Vuejs]-Vue.js form validation and ajax submit
- [Vuejs]-Vue prop watcher triggered unexpectedly if the prop is assigned to an object directly in template
Source:stackexchange.com