Image publique ou importée — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 6)

Image publique ou importée

Vite et composants monofichiers · niveau 2

Énoncé

Un composant affiche deux fois la couverture de « Programmation Java » : une fois avec src="/images/java.svg" (fichier dans public/images/), une fois avec une image importée depuis src/ex5/assets/couverture-java.svg. Écrire le composant et afficher dans la console la valeur importée. Que contient-elle ? Pourquoi ?

Corrigé


<script setup>
// Importée : Vite la traite (empreinte dans le nom, ou image intégrée si petite).
import couverture from "./assets/couverture-java.svg";

console.log("importée :", couverture);
</script>

<template>
  <!-- Dans public/ : copiée telle quelle, adresse fixe depuis la racine du site -->
  <img
    src="/images/java.svg"
    alt=""
    width="60"
    height="80"
  >
  <img
    :src="couverture"
    alt=""
    width="60"
    height="80"
  >
</template>

La console affiche (ligne coupée) :


importée : data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci…

en développement comme dans la version construite. L'image importée ne fait que 444 octets : en dessous de 4 ko, Vite l'intègre au code sous forme d'adresse data: (son contenu encodé en base 64), ce qui économise une requête. Une image plus grosse serait copiée dans dist/assets/ sous un nom à empreinte, et la valeur importée serait cette adresse. L'image de public/ est toujours à l'adresse fixe /images/java.svg.