0
votes

Réagir dynamiquement ajouter une image

J'essaie d'ajouter des images de manière dynamique à partir du dossier assets dans mon composant react. Voici le code que j'ai:

import React from 'react';

const card = (props) => {
  const image = require.context(
    `../../assets/imgs`,
    true,
    new RegExp(`(${props.vnum}_${props.snum}.png)$`)
  );
  return (
    <div>
      <img src={image} alt="image" />
      <p>{props.english}</p>
      <p>{props.french}</p>
    </div>
  );
};

Lorsque je fais cela, j'obtiens l'erreur suivante:

TypeError: webpack_require (.. .). context n'est pas une fonction

J'ai utilisé CRA et en regardant les messages précédents, je vois que cela devrait fonctionner. Où est-ce que je me trompe?

reactjs webpack

2 commentaires

peut-être, l'utilisation de createContext () pourrait résoudre votre problème!

Avez-vous trouvé une solution pour cela ??

4 Réponses :

0
votes

Il est nécessaire de l'utiliser dans ces conventions?

La solution la plus simple sans require.context()↑

import React from 'react';
import Image from "../../assets/img/english
import Image from "../../assets/img/french

    const card = (props) => {
      return (
        <div>
          <img src={english} alt="image" />
          <p>{props.english}</p>

          <img src={french} alt="image" />
          <p>{props.french}</p>
        </div>
      );
    };

Aussi: p>

Il est possible d'ajouter un rendu conditionnel ici (dépend du rendu variable anglais ou français) - je ne suis pas sûr que vous en ayez besoin.

require.context est une fonction spéciale prise en charge par le compilateur de webpack qui vous permet d'obtenir tous les modules correspondants à partir d'un répertoire de base. L'intention est de dire à webpack au moment de la compilation de transformer cette expression en une liste dynamique de toutes les requêtes de module correspondantes possibles qu'il peut résoudre, en les ajoutant à son tour en tant que dépendances de construction et en vous permettant de les exiger au moment de l'exécution.

Donc, si l'expression régulière correspond à plus d'un élément - un mappage est nécessaire - cependant, je pense que dans ce problème spécifique, l'importation est suffisante.

1 commentaires

En fait, la raison pour laquelle j'utilise require.context () est que l'image requise dépendra des accessoires transmis, donc j'en ai besoin pour reconnaître le fichier image à importer lors de la construction

0
votes

Cela devrait suffire.

import React from 'react';

const Card = (props) => {
  return (
    <div>
      <img alt="image" src={require(`../../assets/imgs/${props.vnum}_${props.snum}.png`} />
      <p>{props.english}</p>
      <p>{props.french}</p>
    </div>
  );
};

3 commentaires

En fait, j'avais également essayé cette méthode, mais à chaque fois qu'il ne parvient pas à trouver le module, j'obtiens une erreur dans laquelle il semble qu'il ne vérifie pas le bon dossier pour l'image: Erreur: Impossible de trouver le module './3_147 .png '

Pour que cela fonctionne, le chemin doit être dans le répertoire src .

Oui, l'emplacement exact de l'image est src / assets / imgs / 1_1.png par exemple

0
votes

vous pouvez utiliser simplement require ()

import React from "react";

export default function card(props) {
  const image = require(`./img/${props.vnum}_${props.snum}.jpg`);

  return (
    <div>
      <img src={image} alt="image1" width="200px" />
      <p>{props.english}</p>
    </div>
  );
}

card.js

import React from "react";
import "./styles.css";
import Card from "./card";

export default function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <h2>check this!</h2>
      <Card vnum={12} snum={13} english={"english"} />
    </div>
  );
}

vous pouvez vérifier ceci ici https://codesandbox.io/s/elegant-ramanujan-5qwcp

1 commentaires

J'ai essayé cela, mais j'obtiens une erreur dans laquelle il ne peut pas trouver le module: module non trouvé: impossible de résoudre './assets/imgs'

0
votes

Ce n'est pas la réponse exacte à votre question, mais cela pourrait vous aider dans les scènes ultérieures, peut-être que vous le savez peut-être déjà. Si vous avez des URL de l'image qui peuvent être récupérées sur Internet, vous pouvez les enregistrer dans un tableau. Par exemple: const array = ['url1', 'url2', .... etc]

Ensuite, utilisez: array.map (url => {})

Aussi, si vous tirez d'une API, utilisez la même méthode.

0 commentaires