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
Would really appreciate a simpler detailed explanation.
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>