[SOLVED] How to use images from the assets folder inside the script tags of .vue files?

[NILA]

I’ve been around this problem lately. I tried to follow the docs about app handling assets. But none of the methods works for me and I’ve got a couple of questions in my mind…

The Doc that I followed: https://quasar.dev/quasar-cli/cli-documentation/handling-assets#Getting-Asset-Paths-in-JavaScript

In this specific part of the doc:

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

I used this as the reference for my problem. Tried to do this one, but it does not work.

I cannot follow that doc directly because the require() does not work inside the script tags. My current workaround is actually by using window.require() which is totally weird because I haven’t seen anything like that in the docs. So I tried to substitute things with that but still no luck, I still get an error in my console…

The doc stated that I should use a relative path, and that’s what I did. I even tried to reference my image by plain relative path, without the require(), but when I do that I get a 404 error instead in my console saying the file was not found.

I’m clearly stuck here guys, could someone help me with this and explain things to me on 1.) why require() does not work directly on my script tags, 2.) should I really be placing my images inside the assets folder? because things work well with static folders by just using the path statics/, if so how about my json files?, and 3.) how to reference an image inside my script tag / javascript.

I’m actually using using preloadjs to load my image files, that’s why I’m struggling with all of this. Also, if it is important, this is my folder structure…

This is my quasar info…

[rab]

@NILA

Not an expert in Assets v Statics but maybe this helps:

1. Try without prefetchjs to check require works in your scripts.

2. https://quasar.dev/quasar-cli/cli-documentation/handling-assets

Files in the “assets” folder are only included in your build if they have a literal reference in one of your Vue files. Every file and folder from the “statics” folder are copied into your production build as-is, no matter what.

3. Do you need a ‘~’ at the start of the image reference ?

4. Check if there is a .jpg v .jpeg mistake

[NILA]

@rab To answer your suggestions:

1. I don’t know anything about prefetchjs, sorry about that, I’m just new with this whole Vuejs and quasar framework thing and I’m still coping up with Javascript.

2. With regards to the ~ at image referencing, are you talking about something like ~assets/....? I tried that also because I followed the entire docs that I shared in here, but still when I run quasar dev in either electron mode or spa the console states that its trying to find the file in localhost:8080/assets/... which still results in 404 error.

3. I played with file extensions also, unfortunately none of it made sense…

[rab]

@NILA

I tried the examples on the docs page you linked to.

1. Require worked in my script tag as per the documentation. It failed first time as my relative path was not right. Try creatingimage-1.jpg in same folder as your .vue file and doing:

computed: {
  n () {
    return 1
  },
  background () {
    return require('./' + this.n + '.jpg')
  }
}

2. Your use case may best suit the statics folder option:

Please note that whenever you bind “src” to a variable in your Vue scope, it must be one from the statics folder.

[NILA]

@rab i thought of that might work too, but asset management will be ignored if that’s the case, and I dont want that kind of thing or best avoid it at all If possible. As with require() I’m still clueless on why I can’t use it directly without using the namespace of window. I try to separate my .vue files with my asset files or other non-vue related files, so that I can manage them easily, it may sound so perfectionist but I want to keep my project structure meaningful and organized as it can be.

[rab]

@NILA

Suggestion was to put image file in same folder as vue file just to check whether require working or not. After testing put assets where you like.

I think the “Getting Asset Paths in JavaScript” is giving you Webpack asset management for folders you specify.

[NILA]

@rab said in How to use images from the assets folder inside the script tags of .vue files?:

@NILA

I tried the examples on the docs page you linked to.

1. Require worked in my script tag as per the documentation. It failed first time as my relative path was not right. Try creatingimage-1.jpg in same folder as your .vue file and doing:

computed: {
  n () {
    return 1
  },
  background () {
    return require('./' + this.n + '.jpg')
  }
}

2. Your use case may best suit the statics folder option:

Please note that whenever you bind “src” to a variable in your Vue scope, it must be one from the statics folder.

I tried this many times… But got the same error over and over.

My Project Structure:

I’m currently working with my Page_MainMenu.vue file, and as you can see above, in line 128, the image 1.jpeg is in the same folder also. But all of this results in the error above.

Note also that I am now able to use require directly, can’t seem to figure on how I cannot use the require directly, so I did a little hack by creating a const then assigning it to the value window.require…

[NILA]

I don’t know if my problem was all about a bug that happened during the installation but reinstalling things by starting a fresh project with quasar create fixed things. Now I am able to use assets files inside my script tags plus I don’t have to use the window namespace anymore. I don’t know anything more though, before, I started my project using npm now I switched to yarn. I bet that’s not the case.