Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project.
My current issue revolves around loading an image from the resources/js/assets directory. While there are already a few images in this folder due to the template being used, I encountered a problem when trying to load a newly added image file. Strangely, the new image wouldn't load while the older ones in the same directory displayed just fine. I am attempting to set the new image as the background image of the page using the following code:
HTML:
<div class="page-header align-items-start min-vh-100" :style="{ backgroundImage: 'url(' + bgImage + ')' }">
Vue (JS):
export default {
name: "login",
data() {
return {
bgImage: "/assets/img/office-dark.jpg"
};
}
I have tried adding various new image files, but the issue persists - no errors are thrown, yet the images simply do not load. The older image files work perfectly fine. Any recommendations or suggestions would be greatly appreciated.