-1

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?

DenjanD
  • 54
  • 5
  • 1
    think about the missing character in `'url(' bgImage + ')'` - or do `\`url(${bgImage})\`` – Bravo May 12 '22 at 06:45
  • *when I tried to load a new image file that I just put* - so, the browser doesn't notice that you changed the file on the server? it won't, until you reload the page – Bravo May 12 '22 at 06:49
  • Thank you for the correction. I tried the 'url(${bgImage})' and fixed the missing character ('+') but still the new image won't be loaded – DenjanD May 12 '22 at 06:50
  • @Bravo I reloaded the page every time I changed something but the problem is still the same. The new image file won't show up, but when I change to old image file (any old image file) the image showed up – DenjanD May 12 '22 at 06:52
  • oh ... so, changing the value of `bgImage` doesn't work, or are you changing the image file itself? I'm confused – Bravo May 12 '22 at 06:54
  • I didn't change the image file, I just added a new image file into the directory, and changed the image path in the file, but the new image did not show up. But when I tried to change it to another file except for the file that I just add, the image showed up. Is there something I should do with cache things? – DenjanD May 12 '22 at 06:56
  • 1
    if you're using laravel, you should put image in public folder. Then just call the image as usual – Alvin Indra May 12 '22 at 06:59
  • @AlvinIndra Thank you for the suggestion. It works, but I am still curious why does the new image file couldn't be loaded using the js – DenjanD May 12 '22 at 07:05
  • it can, it's just that you don't understand your build environment well enough to know what you're doing – Bravo May 12 '22 at 07:29

1 Answers1

1

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

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

Nick
  • 66
  • 6