Explication détaillée d'exemples d'utilisation de chemins d'alias pour référencer des adresses d'images statiques dans webpack+vue

Tout le monde connaît les avantages des alias de webpack, mais dans les modèles de vue, des problèmes surviennent toujours lors de l'utilisation d'alias pour les adresses d'images. Pendant longtemps, je pensais que c'était à cause de webpack. Cet article présente principalement l'utilisation de chemins d'alias pour référencer des adresses d'images statiques dans webpack+vue. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela aidera tout le monde.

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

<template>
 <img  src="/static/imghwm/default1.png"  data-src="assets/images/logo.jpg"  class="lazy"   / alt="Explication détaillée d'exemples d'utilisation de chemins d'alias pour référencer des adresses d'images statiques dans webpack+vue" >
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(asset/images/bg.jpg)
}
</style>

Avec le code ci-dessus, vous constaterez que seule l'introduction de style.css, l'adresse de l'image et l'arrière-plan est réussi. L'adresse de l'image ne parviendra pas à être analysée...

Après diverses recherches pour trouver la raison (à ce moment, vous constaterez que la recherche de Baidu pour ces contenus techniques est vraiment un combattant parmi les ordures ), et j'ai finalement trouvé la raison...

vue-html-loader et css-loader traduisent les URL non racine en chemins relatifs Afin de le traiter comme un chemin de module, préfixez-le avec. ~

Ajoutez simplement un ~

devant l'alias. Le code final s'écrit :

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

<template>
 <img  src="/static/imghwm/default1.png"  data-src="~assets/images/logo.jpg"  class="lazy"   / alt="Explication détaillée d'exemples d'utilisation de chemins d'alias pour référencer des adresses d'images statiques dans webpack+vue" >
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>

Cela signifie : Indiquez au chargeur qu'il s'agit d'un module, pas d'un chemin relatif

Remarque : Uniquement l'adresse du fichier statique dans le modèle et l'adresse du fichier statique dans le style, il faut ajouter ~, dans le script, l'alias est défini comme quoi que ce soit.

À ce stade, je lutte avec le problème depuis plusieurs mois et je l'ai finalement résolu...

Au fait, je publierai une liste des alias que j'utilise :

alias: {
  'assets': path.resolve(__dirname, '../src/assets'),
  'src': path.resolve(__dirname, '../src'),
  '~api': path.resolve(__dirname, '../src/api'),
  '~components': path.resolve(__dirname, '../src/components'),
  '~pages': path.resolve(__dirname, '../src/pages'),
  '~router': path.resolve(__dirname, '../src/router'),
  '~store': path.resolve(__dirname, '../src/store'),
  '~utils': path.resolve(__dirname, '../src/utils')
}

Recommandations associées :

PHP exemple de code régulier pour obtenir toutes les adresses d'images sur la page

Expression régulière pour traiter les adresses d'images et les balises img Résumé et partage des méthodes

Comment pour remplacer l'adresse de l'image (img src) dans une chaîne par une expression régulière JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!