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

Importing and using images in Vue Single-File Components (SFC) can be achieved through several different methods. The primary approaches involve using images directly in the component template via URLs or importing images in the JavaScript section using require or import statements. I will now detail these methods:

Method 1: Using URLs Directly in the Template

This is the simplest approach, suitable for publicly accessible image URLs or images stored in a public directory (e.g., public). Simply specify the image URL in the src attribute of the img tag within the template.

vue
<template>
  <div>
    <img src="/public/images/logo.png" alt="Logo image">
  </div>
</template>

The path /public/images/logo.png is relative to the project's public directory public.

Method 2: Using require to Import Local Images

When the image file resides in the same source code directory as the Vue component or when you intend to optimize images via Webpack, use the require method to import the image.

vue
<template>
  <div>
    <img :src="imageSrc" alt="Logo image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: require('@/assets/logo.png')
    };
  }
}
</script>

Here, @/assets/logo.png denotes a path relative to the project's src/assets directory, where @ is a common alias in Vue CLI projects pointing to the src directory.

Method 3: Using import to Import Images

If you are using ES6 module syntax, opt for import to import the image.

vue
<template>
  <div>
    <img :src="imageSrc" alt="Logo image">
  </div>
</template>

<script>
import imageSrc from '@/assets/logo.png';

export default {
  data() {
    return {
      imageSrc
    };
  }
}
</script>

This method is functionally similar to require but aligns more closely with ES6 module import standards.

Summary

Each method has specific use cases:

• Method 1 is ideal for directly referencing external URLs or images in the public directory.
• Methods 2 and 3 are better suited for managing internal project resources, enabling optimization through build tools like Webpack.

The choice depends on project requirements and configuration. In practice, developers should flexibly select the appropriate method based on project setup and optimization needs.