If you wish to load them by webpack you can simply use :src='require('path/to/file')'
Make sure you use :
otherwise it won't execute the require statement as Javascript.
In typescript you can do almost the exact same operation: :src="require('@/assets/image.png')"
Why the following is generally considered bad practice:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
When building using the Vue cli, webpack is not able to ensure that the assets file will maintain a structure that follows the relative importing. This is due to webpack trying to optimize and chunk items appearing inside of the assets folder. If you wish to use a relative import you should do so from within the static
folder and use: <img src="./static/logo.png">