Quasar assets vs statics directories

Question

I am trying to understand the difference between assets and statics directories and when I should be using one or the other, especially in handling images.From the directory structure docs they seem to describe as

• assets/ # dynamic assets (processed by webpack)
• statics/ # pure static assets (directly copied)

Would really appreciate a simpler detailed explanation.

Answer 1

The docs explaining the difference for asset handling pretty straightforward:

Please note that whenever you bind “src” to a variable in your Vue scope, it must be one from the statics folder. The reason is simple: the URL is dynamic, so Webpack (which packs up assets at compile time) doesn’t know which file you’ll be referencing at runtime, so it won’t process the URL.

<template>
  <div>
    <q-img :src="thisImgDoesntWork" />
    <q-img :src="thisImgWorks" />
    <span class="thisCssImgFromAssetsWorks"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thisImgDoesntWork: '~assets/dummy.png',
      thisImgWorks: '/statics/dummy.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.thisCssImgFromAssetsWorks {
    // ... because the URL can't change after compile time
    background: url('~assets/dummy.png');
}
</style>