Voici mon composant. Il faut un accessoire imageUrl qui est une String faisant référence soit à une image d'une URL, soit à une référence à un actif local à partir du dossier des actifs
<ReviewTile
image-url="../assets/Eugene.png"
full-name="Eugene B.
"
title="UI/UX Designer."
content=" Christabel is one of the business world’s truly great deal makers and strategists, easily on par with
the best of the strategy consultants and designers I have worked with at SOS-HGIC and Kleio. She is also
a world-class human being."
></ReviewTile>
<div style="background-color: #b7b7b7;height: 1px; margin: 33px 0px"></div>
<ReviewTile
image-url="../assets/headshot_black1.png"
full-name="Gilliam D."
title="Web designer/Developer"
content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
></ReviewTile>
Je l'utilise comme ça:
<template>
<div class="flex" style="height: 155px;align-items: center">
<div class="avatar" style="height: 130px;width: 130px">
<img :src="require(`imageUrl`)" height="130" width="130" style="border-radius: 50%"/>
</div>
<div class="flex flex-column" style="margin-left: 31px">
<div class="flex" style="font-weight: bold">
{{fullName}}
</div>
<div class="flex" style="">
{{title}}
</div>
<div style="height: 20px"></div>
<div class="flex" style="text-align: start">
{{content}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "ReviewTile",
props: {
imageUrl: String,
fullName: String,
title: String,
content: String
}
}
</script>
<style scoped>
</style>
Mais les images ne se chargent pas.
4 Réponses :
si vous envoyez le chemin de l'image dans l'url, vous pouvez utiliser directement les accessoires,
mais assurez-vous que vous fournissez le bon chemin vers l'image.
// Wrong
<ReviewTile
image-url="../assets/Eugene.png"
full-name="Eugene B.
// correct one would be something like this
<ReviewTile
:imageUrl="../assets/Eugene.png"
full-name="Eugene B.
changez également le nom de votre accessoire dans l'autre composant
<img :src="imageUrl" height="130" width="130" style="border-radius: 50%"/>
J'ai essayé cela en premier. Cela ne fonctionne pas Je suis sûr que le chemin est correct "../assets/headshot_black1.png"
avez-vous testé avec une image externe qui se trouve en dehors de l'image du dossier de votre projet local?
les accessoires doivent également être exactement les mêmes, il semble que vous ayez <ReviewTile image-url=" , il doit être :imageUrl
ça ne marche pas. J'ai essayé tout ce que tu as dit. J'ai remarqué en utilisant la console développeur que tous les autres actifs se chargent dans un chemin différent <img data-v-ced23842 = "" src = "/ img / Samira_Wiley.e5c6a63f.png" height = "213" width = "213" style = " rayon de la bordure: 50%; ">
Merci! Mais le <ReviewTile image-url = "... est le bon, pas le <ReviewTile: image-url. Vous devez utiliser: uniquement pour lier à l'intérieur du composant Vue mais pas sur le code laravel / blade.
Si toutes vos images sont dans le même dossier, vous pouvez simplement passer le nom du fichier comme accessoires:
<div class="avatar">
<img :src="require(`../assets/${imageUrl}`)" />
</div>
Ensuite, dans le composant ReviewTitle , exigez l' imageUrl avec le chemin des ressources:
<ReviewTile image-url="Eugene.png" ... ></ReviewTile> <ReviewTile image-url="headshot_black1.png" ... ></ReviewTile>
Remarque:
Si toutes les images ont la même extension .png vous pouvez même simplement écrire le nom du fichier comme image-url="Eugene" et dans le composant: <img :src="require(`../assets/${imageUrl}.png`)" />
Il y a un étrange bug JS qui rompt le chargement de l'image (sry, j'ai oublié ce que c'était, mais j'ai trouvé la solution sur stackoverflow il y a quelque temps).
Ce qui aide est de casser la demande d'image comme ceci:
:src="require('@/assets/' + imageName + '')"
Vous n'avez donc que le nom de votre image dans l'accessoire et chargez-le sans les accolades. Désormais, vous n'avez plus à vous soucier du chemin correct. Le @ trouvera le bon dossier.
Si quelqu'un peut mieux expliquer les aspects techniques de cela ou trouver l'autre fil de discussion avec la solution, n'hésitez pas à développer ma réponse.
Edit: Première partie de l'explication: Webpack ne peut pas fonctionner avec seulement une variable comme chemin, car il devrait alors parcourir potentiellement des milliers de fichiers. Vous devez donc avoir la partie @ / assets / sous forme de texte. Expliqué plus bien ici: L'image dynamique Vue.js src avec webpack require () ne fonctionne pas
Impossible de trouver encore pourquoi les accolades ne fonctionnent pas.
Pour ceux qui utilisent Nuxt.js pour les applications Vue, il existe une solution simple utilisant static dossier static au lieu d' assets .
La principale différence entre ces deux dossiers est que static n'est pas compilé par Webpack - vous êtes donc libre d'utiliser les variables à votre guise.
Voir la documentation: