Quasar / Vue.js Image in header not showing

Viewed 71

Im really new to Vue.js and Quasar and am currently trying to build just a basic application. In there i have a header which should display a logo on the top left using the following code in my MainLayout.Vue.

<q-layout view="hHh LpR fFf">
  <q-header elevated class="bg-accent text-white">
    <q-toolbar>
      <q-toolbar-title>
        <q-img src= "public/icons/favicon-16x16.png" style="width: 70px;">
        </q-img>
        Title
      </q-toolbar-title>
    </q-toolbar>
  </q-header>
  <q-page-container>
    <router-view />
  </q-page-container>
</q-layout>

It runs without an error, but the image is not displayed. At its position there is just a blank space. When i open up the JavaScript Console in my Browser,

Failed to load resource: the server responded with a status of 404 (Not Found)

The path is definitely right. Placing the image inside of the src/assets folder did not help as well. I followed this tutorial, which lead me to the point im at now. The only difference i can see is that the project in the tutorial uses the "static" folder for its image, however my project does not contain such "static" folder. Googling i found that the "static" folder got turned into the "public" folder through some update. But since i'm using the public folder for my code above, this seemingly either is not true or the issue is something else.

So how do i get my logo to be displayed top left in my header?

0 Answers
Related