Problem: Assets resources 404 NOT FOUND

9223000

Hello!
I ask for help.
After upgrading to v.1.1.0, when starting project as command “quasar dev”, assets resources were no longer available.

For example:
http://localhost:8080/assets/logo.svg

Result:
Cannot GET /assets/logo.svg
Status Code: 404 Not Found

On quasar version 1.0.5, everything worked great!

Tell me, what could be the reason?

Hawkeye64

The best way to convert to a v1 project from a <v1 project, is to create a new project, then copy all your source over (don’t overwrite anything), and hook it up. Then use the eslint-plugin-quasar to show you where you need to change things.

9223000

@Hawkeye64
The problem is observed when upgrading from v1.0.5 to 1.1.0

metalsadman

Try moving that to your statics folder, i wonder why you are referencing that url in your browser though, what mode are you using?

9223000

Dev mode = spa

The problem only appeared when upgrading to “Pkq quasar = v.1.1.0; Pkg @ quasar / app = v1.0.5”

On the version “Pkq quasar = v.1.0.5; Pkg @ quasar / app = v1.0.4” everything works fine!

If the resources are moved to the statics folder, then the request will succeed.
http: // localhost: 8080 / statics / logo.svg

but the request to assets on the version “Pkq quasar = v.1.1.0; Pkg @ quasar / app = v1.0.5” is not successful:

http: // localhost: 8080 / assets / logo.svg
Cannot GET /assets/logo.svg
Status Code: 404 Not Found

I did a simple experiment:

created a clean project using “quasar create” on the version of “Pkq quasar = v.1.1.0; Pkg @ quasar / app = v1.0.5”
put the file “test.png” in the “assets” folder
Launched the quasar dev project
The project with the main page started successfully
fulfilled the request in the browser “http: // localhost: 8080 / assets / test.png”

Result:
Cannot GET /assets/test.png
Status Code: 404 Not Found

Hawkeye64

don’t use /assets/, use ~assets/ as it is a webpack shortcut

9223000

Sorry, but you don’t seem to understand the indicated problem.
In this problem, the web pack does not seem to have anything to do with it.

Here is an example:

In the “assets” folder is located the file “background.svg”
in the folder “pages” is the page file “index.vue”, Its template is as follows:

IT WORKS:
If you run such a project under the version of “Pkq quasar = v.1.0.5; Pkg @ quasar / app = v1.0.4”, then everything will work, i.e. a page with the background image “/assets/batskgound.svg”

which means that the browser can receive (download) this file via URL. YOU CAN CHECK IT SIMPLY BY ENTERING THE BROWSER DIRECT URL IN THE LINE OF ADDRESS “http://localhost:8080/assets/background.svg”

THIS DOES NOT WORK:
If you run such a project under the version “Pkq quasar = v.1.1.0; Pkg @ quasar / app = v1.0.5”, then the background image “/assets/batskgound.svg” will not be shown, but in “Chrome DevTools \ Network” it will be shown:
http://localhost:8080/assets/background.svg
Cannot GET /assets/background.svg
Status Code: 404 Not Found

which means that the browser simply cannot receive (download) this file via URL “http://localhost:8080/assets/background.svg”

THIS DOES NOT WORK IN BOTH CASES (ON BOTH VERSIONS):
And if the template is done like this:
<template>
<q-page class=“flex flex-center” style=“background-color: #ffffff; background-image: url(~assets/background.svg); background-attachment: fixed; background-size: cover”>
</template>

then this will not work in both quasar versions.

In this case, the assembly of projects was carried out on the same PC, i.e. webpack version is the same.

Hawkeye64

Perhaps there is a misunderstanding of how assets vs statics works here. Your assets folder is in the direct care of webpack. It will version and bundle anything in there that is not tree-shaken. Meaning, background.svg is no longer directly there. It’s in one of your compiled js files (bound). Whereas, the statics folder is not managed by webpack, but copied to the proper location in whole at compile time.

This means you will get a 404 because the file is no longer there (as it was). When you import/require it in your code, those webpack function resolve it.

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

Hawkeye64

also, background-image: url(~assets/background.svg); won’t work either because it’s causing the resource to be “fetched” out of the bound package. If you use css url then be sure to put your file being used into statics or use a css var and dynamically change the var after you import or request the resource.

9223000

Thank you very much for the clarification. Indeed, I did not understand the difference between assets (webpack) and static resources. As a result, I figured it out, translated everything into a static and began to work as it should.

Thank you for sorting out the question to the end.

No More Posting New Topics!

Problem: Assets resources 404 NOT FOUND