This is my first time using VUE and I want to reuse a header component that takes in a backgroundImage string variable. Tried researching it and can’t find any tutorials that helps solve this.
Header.vue – the actual component that the image will appear on
<template>
<header :style="{ ...headerStyle, backgroundImage: 'url(' + imageUrl + ')' }">
<h1>Place Holder Text: <br> {{ headings.Index }}</h1>
</header>
</template>
<script>
export default {
name: 'ImageHeader',
props: {
imageUrl: String
},
data() {
return {
headings: {
Index: "Home Page",
About: "About Page"
},
scrolled: false,
};
},
computed: {
headerStyle() {
return {
padding: this.scrolled ? '10px' : '50px 10px',
color: this.scrolled ? 'black' : 'white',
textAlign: 'center',
fontWeight: 'bold',
position: 'fixed',
top: 0,
width: '100%',
height: this.scrolled ? '100px' : '56rem',
transition: '0.5s',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'cover',
margin: 'auto',
lineHeight: this.scrolled ? '2rem' : '3rem',
zIndex: 1,
};
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
this.scrolled = window.scrollY > 50;
}
}
};
</script>
App.vue – contains Header component and another component
<template>
<div>
<!-- Pass headerImageUrl to the ImageHeader component -->
<ImageHeader :imageUrl="headerImageUrl"/>
<SideBar/>
<!-- Your main content here -->
</div>
</template>
<script>
import SideBar from './components/SideBar.vue';
import ImageHeader from './components/Header.vue';
export default {
name: 'App',
components: {
ImageHeader,
SideBar
}
}
</script>
index.html – where I want to insert the path to the file
<body>
<div id="app" image-url="../src/assets/ImageName.png" </div>
</body>
I’ve swapped out some stuff like the image names and content text for security and I’ve only included the relevant div element in the html file. I’m using the default vue directory template if that helps visualise what files and paths I’m working with.
The closest I’ve gotten to this working is declaring the file path with a png/jpeg file on the internet in App.vue but this hardcodes it for every page I want to use the App component on.