J'essaye de donner le nom d'image dans src dynamiquement. Je veux définir le nom de l'image de manière dynamique en utilisant une variable avec un chemin. mais je ne suis pas en mesure de définir correctement src. J'ai essayé des solutions sur stackoverflow mais rien ne fonctionne.
J'ai essayé de donner un chemin comme ça
<img src={require('../img/nokia.jpg')}/>
mes images sont enregistrées dans le chemin src / img si je donne un chemin comme celui-ci
<img src={`../img/${img.code}.jpg`}></img>
<img src={'../img/' + img.code + '.jpg'}></img>
<img src={'../img/{img.code}.jpg'}></img>
l'image est affichée
Je sais que cette question a déjà été posée mais rien ne fonctionne pour moi. S'il vous plaît, aidez-moi comment puis-je définir le chemin de l'image?
4 Réponses :
si vous ne voulez pas avoir besoin de l'image, vous devez mettre toutes vos images dans un dossier public, puis
<img src={`../img/${img.code}.jpg`}></img>
cette méthode fonctionnera.
Vous pouvez toujours utiliser require
<img src={require(`./img/${img.code}.jpg`)}/>
Il n'est pas recommandé d'ajouter manuellement des images au dossier public. Voir cette réponse ici: https://stackoverflow.com/a/44158919/1275105
require n'autorise pas les variables. Il doit s'agir d'une chaîne littérale.
@backslashN cela fonctionne (au moins localement), si nécessaire, vous pouvez utiliser "./img/"+img.code+".jpg" - React le convertira en chaîne avant de l'importer.
Si vous obtenez le chemin de la base de données pour plusieurs images et que vous devez l'utiliser dans une seule balise, vous pouvez suivre la méthode ci-dessous. étape 1: veuillez vous assurer que les images sont dans un dossier public. Étape 2: Mettez à jour votre chemin doit commencer à partir de public et non de src. étape 3: assurez-vous de vérifier que le chemin doit être utilisé comme une variable. Si le chemin de vos images doit être utilisé dans la variable imgPath. Vous pouvez utiliser votre code comme var imgPath = '/img/pic.jpeg' "src = {imgPath}"
J'espère que cela t'aidera..
Dynamic require ne semble pas être propre et eslint n'est pas satisfait (je ne sais pas pourquoi)
Deux autres approches si les images sont stockées dans un dossier public:
const imgNameWithPath = '/fullImageNameWithPath.jpg'
Utilisation de env <img src={process.env.PUBLIC_URL + imgNameWithPath} />
Utilisation de l'origine de l'emplacement: <img src={window.location.origin + imgNameWithPath} />
si vous ne voulez pas avoir besoin de l'image, vous devez mettre toutes vos images dans un dossier public et <img src = {
../img/${img.code}.jpgimg/../img/${img.code}.jpg{../img/${img.code}.jpg}../img/${img.code}.jpg}> </img> cette méthode fonctionnera.@Vikas Singh merci d'avoir résolu mon problème. veuillez ajouter ceci comme réponse.
stackoverflow.com/questions/63550036/… . Cela donnera des informations pour le chargement de l'image d'exécution