Get dynamic image from assets folder

hata

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

Jon

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" />

hata

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

rstoenescu

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

Martin

@hata Here’s some more clarification
http://quasar-framework.org/guide/app-handling-static-assets.html

@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" />

Jon

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

hata

@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

rstoenescu

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.

Emptyless

@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?

rstoenescu

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

MagoSchmidt

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

mas

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/’+images.id+’.jpg’" /></q-item-side>

or

<q-item-side :image="‘statics/faces/’+images.id+’.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?

Hawkeye64

I’m guessing what your code looks like…
HTML:

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

CODE:

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

mas

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 images.id was a number and :image="‘statics/faces/’+images.id+’.jpg’", the syntax I used, didn’t convert it into a string.

No More Posting New Topics!

Get dynamic image from assets folder