vue cli 3 - utiliser l'image d'arrière-plan dans la balise de style
Je veux utiliser une image svg de mon dossier d'actifs dans l'un de mes composants comme image d'arrière-plan. Voici un exemple de mon composant:
<template>
<div class="container"></div>
</template>
<script>
export default {
name: 'component'
}
</script>
<style scoped lang="scss">
.container {
height: 40px;
width: 40px;
background-image: url('@/assets/image.svg');
}
</style>
Mais l'image ne s'affiche pas. Le Chemin est correct. Où est mon erreur? Merci de votre aide.
Comme Max Martynov , mis en évidence dans les commentaires, vous devez utiliser url('~@/assets/image.svg').
Webpack a des règles spécifiques lors de la résolution des actifs[1].
Afin de résoudre un alias (@), Comme vous l'utilisez, il est obligatoire que le webpack traite la demande comme une demande de module. L'utilisation du préfixe ~ Oblige le webpack à traiter la demande comme une demande de module, similaire à require('some-module/image.svg').
Les références
Je recommanderais d'utiliser une reliure de style. J'ai trouvé ce fil vraiment utile lien .
Voici un exemple utilisant les cartes bootstrap
<div
class="card-image"
:style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">
L'image est dans src/assets/images/cards.jpg