Problem: Assets resources 404 NOT FOUND

  • 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:

    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?

  • 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.

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

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

  • 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:

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

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

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

  • 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:

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

    <q-page class=“flex flex-center” style=“background-color: #ffffff; background-image: url(/assets/background.svg); background-attachment: fixed; background-size: cover”>

    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

    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:
    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

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

    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.

  • 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.

  • 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.

  • 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.

Log in to reply