Vue cli 3 project ,dynamic src in image path not working

vue.js webpack assets webpack-dev-server vue-cli-3

The second way fails because "~" try to get this asset from node_modules. You can read more about handling assets here:https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports.

To fix it just use require like below:

data() {  return {    imgPath: require('@/statics/logo.png')  }}

..or directly in template:

<img alt="Vue logo" :src="require('@/statics/logo.png')">

vue.js webpack assets webpack-dev-server vue-cli-3

For Vue 3 projects you can use the following:

<img src="./assets/logo.png" />

CodeHunter