How to import and use image in a Vue single file component?

user_3541205 0
Viewed 209441

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?

webpacker vuejs2 vue.js
10 Answers

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="">
user_31971930

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.

user_125773550

These both work for me in JavaScript and TypeScript

<img src="@/assets/images/logo.png" alt="">

or

 <img src="./assets/images/logo.png" alt="">
user_76583450

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.

user_141406340

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.

user_45846720

..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.

user_139696000

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')" />
user_65706910

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

user_134172900
Related