I have a new vue site which was built using vue-cli but my image will not load at all and can't figure out why
<router-link class="logo" to="/" tag="img" src="@/assets/logo.png" style="cursor: pointer"/>
I have the image saved in the assets folder
console
But if I use the below it does display
<img src="@/assets/logo.png" />
console
With vue cli images are considered as modules so you should import or require them :
<router-link :src="require(@/assets/logo.png)" style="cursor: pointer" class="logo" to="/" tag="img" />
As far as I can see, <router-link> does not have a src prop: https://router.vuejs.org/api/#router-link-props
router-link is rendered as an HTML img so the src is valid
router-link doesn't have a src prop: since it doesn't itself know about the src prop it's going to pass the value as-is. It's not like Vue looks at all attributes everywhere to see if they look like paths that should be rewritten.When you use Vue with Webpack (almost always), Vue-loader is used to compile your .vue files. When compiling <template> part of the file, it looks for some common tags like <img> and is able to transform content of the src tags into Webpack module requests
So your <img src="@/assets/logo.png" /> is at compile time transformed (essentially) into <img :src="require('@/assets/logo.png')" />
See the link above for tag/attribute combinations transformed by default. If the combination you need is not there (as in your case), you can either configure Vue-loader (transformAssetUrls) as many popular UI libraries do (for example Vuetify for it's v-img component) or you must do it by hand as @Boussadjra Brahim suggested (with missing quotes tho):
<router-link :src="require('@/assets/logo.png')" to="/" tag="img" />
