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



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

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.