111

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?

4
  • Just use src='images/zapier_logo.svg' if it is a static svg image Commented Jul 15, 2017 at 9:50
  • Are you getting an error in your console?
    – Rwd
    Commented Jul 15, 2017 at 12:43
  • Using an import statement would only work if you are trying to use it as a custom component within the <template> tags and not as a src file for an img tag. You will also need to properly add it to the "component" field of the vue object. Commented May 27, 2022 at 15:51
  • Not sure if you have tried :src="zapierLogo", without the mustaches. Commented May 27, 2022 at 15:53

12 Answers 12

179

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> 
8
  • 5
    You might want to also include, image: require('path/to/file') if you wish to include it in data.
    – li x
    Commented Jul 15, 2017 at 10:47
  • 4
    I think we should also mention the use of tilde(~)before the url. In case you are not using require. src="~src/assets/img/me.png"
    – aks
    Commented Mar 18, 2018 at 4:02
  • 16
    :src="require('@/assets/image.png')" Works for me. Commented Aug 31, 2018 at 13:31
  • 2
    how to use it in background-image:url('') ?
    – Aslam khan
    Commented May 14, 2020 at 21:42
  • The image as a module way is the only working one for me.
    – Ibrahim.H
    Commented May 28, 2020 at 17:57
31

It is heavily suggested to make use of webpack when importing pictures from assets and in general for optimisation and pathing purposes

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

4
  • 1
    So <img :src="require('@/assets/image.png')">? This doesn't work for me. It complains about dependency not found.
    – Pithikos
    Commented Mar 4, 2020 at 10:14
  • @Pithikos There's a lot of reasons why you might be getting this error, can you expand more or maybe post a question and I can try and debug.
    – li x
    Commented Mar 5, 2020 at 10:37
  • url-loader allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to file-loader. - If you don't use webpack to load your image you won't recieve this benefits or the other mentioned here: vue-loader.vuejs.org/guide/asset-url.html#transform-rules @akauppi
    – li x
    Commented Feb 11, 2021 at 11:17
  • @akauppi I highly doubt you're using vue.js but not webpack, vue's native development server is webpack and the builder is also webpack, Also you asked if it's still relevant, as per the documentation it's still very relevant thus answering your comment. Next time don't ask a question if you don't want an answer.
    – li x
    Commented Feb 13, 2021 at 19:55
15

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="">
2
  • While this actually does work, you're not taking advantage of webpack in this case.
    – li x
    Commented Oct 10, 2019 at 8:50
  • I'm not using Typescript but I have to use your solution. Thanks. Commented Jul 23, 2020 at 16:18
3

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.

3

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.

3

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

These both work for me in JavaScript and TypeScript

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

or

 <img src="./assets/images/logo.png" alt="">
3
  • 2
    While this actually does work, you're not taking advantage of webpack in this case. Furthermore this 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.
    – li x
    Commented Oct 10, 2019 at 8:51
  • @lix what do you mean by advantage of webpack? I assume even the SFC would be compiled through the build pipeline I feel.
    – aks
    Commented May 31, 2022 at 3:32
  • @aks When I made this comment using require would convert files to there base64 representation before then using that as the src for loading the image. This is a dynamic resolution that saves size and increases performance of loading an image.
    – li x
    Commented Jun 1, 2022 at 9:02
2

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.

2

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

1

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">
0

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

0
<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 💁🏽

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.