I think this should be simple, but I am facing some trouble on how to import and use an image in Vue single file component. Can someone help me how to do this? Here is my code snippet:
<template lang="html"> <img src="zapierLogo" /> </template> <script> import zapierLogo from 'images/zapier_logo.svg' export default { } </script> <style lang="css"> </style> I have tried using :src, src="{{ zapierLogo }}", etc. But nothing seems to work. I was not able to find any example too. Any help?
As simple as:
<template> <div id="app"> <img src="./assets/logo.png"> </div> </template> <script> export default { } </script> <style lang="css"> </style> Taken from the project generated by vue cli.
If you want to use your image as a module, do not forget to bind data to your Vuejs component:
<template> <div id="app"> <img :src="image"/> </div> </template> <script> import image from "./assets/logo.png" export default { data: function () { return { image: image } } } </script> <style lang="css"> </style> And a shorter version:
<template> <div id="app"> <img :src="require('./assets/logo.png')"/> </div> </template> <script> export default { } </script> <style lang="css"> </style> 
image: require('path/to/file') if you wish to include it in data.
src="~src/assets/img/me.png"
:src="require('@/assets/image.png')" Works for me.
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">
<img :src="require('@/assets/image.png')">? This doesn't work for me. It complains about dependency not found.I came across this issue recently, and i'm using Typescript. If you're using Typescript like I am, then you need to import assets like so:
<img src="@/assets/images/logo.png" alt=""> 
You can also use the root shortcut like so
<template> <div class="container"> <h1>Recipes</h1> <img src="@/assets/burger.jpg" /> </div> </template> Although this was Nuxt, it should be same with Vue CLI.
For Vue 3 I had to use
<template> <div id="app"> <img :src="zapierLogo" /> </div> </template> <script> import zapierLogo from 'images/zapier_logo.svg' export default { ... data: function () { return { zapierLogo } } } </script> Both src="@/assets/burger.jpg" and src="../assets/burger.jpg" didn't seem to work.
I'm also facing same problem to display the assets image. Finally this two way work fine for me-
<img src="@/assets/img/bg1.png" /> and
<img :src="require('@/assets/img/bg1.png')" /> These both work for me in JavaScript and TypeScript
<img src="@/assets/images/logo.png" alt=""> or
<img src="./assets/images/logo.png" alt=""> 
src="./assets/images/logo.png" is discouraged in practice as unlike static you can't ensure how items from the assets directory will be bundled when building.I encounter a problem in quasar which is a mobile framework based vue, the tidle syntax ~assets/cover.jpg works in normal component, but not in my dynamic defined component, that is defined by
let c=Vue.component('compName',{...}) finally this work:
computed: { coverUri() { return require('../assets/cover.jpg'); } } <q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/> according to the explain at https://quasar.dev/quasar-cli/handling-assets
In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.
..when everything else fails, like in my case as i tried to import a placeholder i used several times in a multipaged Vuelectro-app - but this time inside a sub-subcomponent where none of the suggested solutions worked (as they usually do)..
<template> <div id="app"> <img :src="image"/> </div> </template> <script> export default { data() { return {image: null, ...} }, methods: { solveImage(){ const path = require('path') return path.join(process.cwd(), '/src/assets/img/me.jpg') }, ... }, mounted: { this.image = this.solveImage() ... } } </script> ..should do it.
if it even works better in created-lifecycle-hook or you'd prefer to require path globally and just call
this.image = path.join(...) in one of the hooks - you should test yourself.
If you are simply importing an image from the public folder then; you could either import the image as an module
<script setup> import orgLogo from '/images/logo.png' </script> <img :src="orgLogo" alt="Organization Logo"> or Use the link directly in the src attribute of img
<img src="/images/org.png" alt="Organization Logo"> in my case i have a base64 image and have to import for parse the mimeType and data from the image
this how the template look like
<template> <img @click="openCardDetail(item)" class="thumbnailInfo" width="80" height="50" :src="getImageToShow(item.stationeryThumbnail)" /> </template> Here i imported the image
import image from '@/assets/noimage.png'
then i instantiated it
data: () => ({ ... image: image, }) then i used only if there is no data in the item
getImageToShow(item) { if(item != null && item?.mimeType !== '' && item?.base64ImageData !== '') { return `data:${item?.mimeType};base64,${item.base64ImageData};` } return `${this.image}`; } it solved my problem
<script setup> import myImg from '@/assets/images/images/my-selfie.png'; </script> <template> <img :src="myImg" /> </template> you can import the image using it's relative path as shown here 💁🏽
src='images/zapier_logo.svg'if it is a static svg image:src="zapierLogo", without the mustaches.