Sometimes, we want to import and use image in a Vue.js single file component.

In this article, we’ll look at how to import and use image in a Vue.js single file component.

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

To import and use image in a Vue.js single file component, we can set the src prop of the image to the image path returned by the require function.

For instance, we write

<template>
  <div id="app">
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
export default {};
</script>

<style lang="css"></style>

to set the src prop of the image to the path returned by require.

We call require with the relative path of the image to return the resolved path of the image.

Conclusion

To import and use image in a Vue.js single file component, we can set the src prop of the image to the image path returned by the require function.