'Vue.js & Laravel - New Image file cannot be loaded but the older image can

I'm working on a Vue.js and Laravel project where the Vue is inside the resources/js directory of the Laravel project.

I'm having a problem with loading an image that I just put inside the resources/js/assets directory. I'm using a template so there are few images inside the folder already, and when I tried to load a new image file that I just put, the image won't be loaded. But when I tried to load the other image (which is the older image inside the directory) the image showed up. I'm trying to add the image as the background image of the page. Here is my code to do it.

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 tried every new image file and that is when the problem occurred (no errors, the image just won't be loaded). The old image files are okay. Any suggestions?

javascripthtmllaravelvue.js


Solution 1:[1]

have a look here, often require is a good choice.

Link: Vue.js data-bind style backgroundImage not working

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick

Related Questions