Get dynamic image from assets folder

  • I cannot get dynamic image from assets folder
    ex: <img :src="/assets/${account.avatar}">
    Anyone can help me or guideline some tips?

  • Is this in a plain HTML template, or are you using some custom templating engine instead?

    If the former, then I don’t think ${foo} does what you think it does. Try this instead…

    <img :src="'/assets/' + account.avatar" />

  • It is the same syntax, cannot get image from assets, i think it is the webpack loader issue, anyone can help me?

  • Admin

    @hata Check publicPath from /config/index.js.

  • @hata Here’s some more clarification

    @rstoenescu @Jon
    Will handling dynamic paths with :src work in the assets folder?
    <img :src="'/assets/' + account.avatar" />

    I know it does work in the statics folder
    <img :src="'/statics/' + account.avatar" />

  • TBH I didn’t pay attention to the path, just the ${} syntax. My bad, sorry.

  • @rstoenescu : I think publishPath for static folder ? I have a slider with many image and i would like load image dynamic by webpack to optimize performance when display slider

  • Admin

    Some notes on assets and statics:

    • publicPath matters for Webpack in determining if a resource is static or dynamic (dynamic meaning it’s handled by Webpack as an asset of your app) and you must set taking into account Vue Router mode (hash or history) as the two modes work differently in respect to URL path
    • Images in assets should be used as src="~assets/...." OR set a relative path to the file you’re specifing as source
    • Webpack + Vue has a limitation on what can be considered an asset of your app or a static. In order for your resource to be considered an asset (and be optimized and included by Webpack) you must NOT use Vue dynamic props (such as :src – note the dot in front of src for this HTML attribute). If you use a dynamic prop then Webpack won’t be able to know which asset you will actually use at runtime, so it skips it.
    • Webpack rule: when specifying the source, if this source starts with / then it’s considered a static. So <img src="/statics/my_image.png"> uses a static. If instead we omit / and write <img src="statics/my_image.png"> then Webpack tries to manage it as a relative path (to the file containing this tag) and include it as an asset.

    To summarize:

    • As a general rule of thumb: if you want to include an asset, hard-code it in src WITHOUT using a Vue dynamic prop (making it :src).
    • Vue/Quasar components using images (like image gallery as an example) uses a binded :src for the images, so these images must be in statics folder. Due to Webpack + Vue limitations, you won’t be able to make Webpack consider them as assets.

  • @rstoenescu when using the Electron wrapper you cannot set publicPath to ‘/’, this does mean however that using statics in the form of ‘/statics/some-image.png’ will not work. I’ve solved this by using relative paths instead of the ‘/statics’ directory. However this is not sustainable for a large Electron application, is it possible to use the ‘/statics’ directory in Electron in some way?

  • Admin

    Don’t set publicPath to ‘/’ and don’t use Vue Router’s “history” mode. They are not compatible with Electron architecture.
    Use ‘statics’ (notice no ‘/’ in front of statics).

  • is there something similar to “string resources” for me to manage localization and flavours messages?

  • I’ve read the article on handling assets and statics but still can’t get it work right.
    I’m trying to render images in a v-for loop in a list, tried different variations:

    <q-item-side><img :src="‘statics/faces/’’.jpg’" /></q-item-side>


    <q-item-side :image="‘statics/faces/’’.jpg’"/>

    However, I get rendered only the first image in the looping for all list items, as if I hard-coded <img src="‘statics/faces/1.jpg’" /> instead of dynamic path.Does anyone know how to solve that?

  • I’m guessing what your code looks like…

    <q-item v-for="image in images" ...
        <q-item-side :image="getImage(image)"/>


    methods: {
        getImage: function (imageData) {
            return `statics/faces/${}.jpg`

  • Hawkeye64, only that I wasn’t creating a separate method to built image path, I was doing that in HTML. However, looks like I found the cause. The was a number and :image="‘statics/faces/’’.jpg’", the syntax I used, didn’t convert it into a string.

Log in to reply