Le répertoire assets peut être utilisé pour stocker:

• Des images
• Des SVG
• Ou tout autre contenu statique que l'on souhaite importer au sein d'un composant

Include un asset au sein d'un composant

Imaginons que l'on dispose d'une image appelée hero.png au sein du répertoire assets/

La solution la plus simple pour afficher l'image au sein du composant est d'utiliser son chemin relatif en tant que source:

<template>
  <div id="hero">
    <img src="../assets/hero.png" alt="A demo image" />
  </div>
</template>

Cependant, celà peut poser des problèmes de performance lors de la génération du site en production.

Note: It may seem completely useless to care about that now, but code splitting can reduce bundle size up to 40%, and thus reduce page loading time.

Afin d'éviter de tels problèmes, il est préférable d'importer les images:

<template>
  <div id="hero">
    <!--
        Specify src attribute using Vue bind syntax.
        In this case we're using a shortcut equal to v-bind:src="image" which means
        that src attribute will be equal to $this.data.image
        Where $this is a reference to the component itself
    -->
    <img :src="image" />
  </div>
</template>

<script>
  // In this case it is necessary to import the image as a module
  import image from "../assets/hero.jpg";

  // And then specify the data function which returns the image
  export default {
    data() {
      return {
        image,
      };
    },
  };
</script>

Cette syntaxe n'est pas bien plus longue et permet d'éviter des erreurs lors du build en production.