web-dev-qa-db-fra.com

importation d'image dynamique (React Js) (le chemin img requis ne peut pas trouver le module)

J'ai besoin d'importer des images (plusieurs) de mon fichier image dynamiquement par une méthode de carte. Tout d'abord, je veux définir une URL de base pour mon fichier d'images, puis lire le nom de l'image à partir de mon fichier JSON qui inclut la propriété d'image, puis définir l'image src en conséquence. Le fichier JSON est comme ci-dessous:

{
      "title": "Blue Stripe Stoneware Plate",
      "brand": "Kiriko",
      "price": 40,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "blue-stripe-stoneware-plate.jpg"
    },
    {
      "title": "Hand Painted Blue Flat Dish",
      "brand": "Kiriko",
      "price": 28,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "hand-painted-blue-flat-dish.jpg"
    },

mon dossier d'images: enter image description here

J'ai lu les produits de redux qui fonctionne parfaitement =>

const products = this.props.products;
console.log(products, 'from redux'); 
const fetchProducts = [];
    for (let key in products) {
      fetchProducts.Push({
        ...products[key]
      });
    }

la console.log () => enter image description here

Maintenant, je veux définir une URL de base comme celle-ci qui sera utilisée ultérieurement comme image src en ajoutant le nom de l'image à partir du fichier JSON dans la méthode map:

const baseUrl = '../../components/assets/images/';
const fetchProducts = [];
for (let key in products) {
  fetchProducts.Push({
    ...products[key]
  });
}

const productCategory = fetchProducts.map((product, index) => {
  return (
    <Photo
      key={index}
      title={product.title}
      brand={product.brand}
      description={product.description}
      imageSource={baseUrl + product.image}
      imageAlt={product.title}
    />
  );
});

mon composant photo ressemble à ci-dessous:

  const photo = props => (
  <div className={classes.Column}>
    <img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
    <div className={classes.Container}>
      <p>{props.brand}</p>
      <p>{props.title}</p>
      <p>{props.price}</p>
    </div>
  </div>
);

export default photo;

malheureusement, j'ai rencontré cette erreur: enter image description here Merci d'avance et désolé pour mon mauvais anglais :)

javascriptreactjsecmascript-6base-url
11
Vahid

Voici donc ce que j'ai trouvé et cela a fonctionné pour moi. Lun

"file-loader": "4.3.0" React: 16.12

. Exécutez ceci dans votre terminal:

npm run eject

archiver le chargeur de fichiers

config/webpack.config

et les configurations de chargeurs de fichiers localisés. Ce que j'ai fait, c'est que j'ai créé un répertoire appelé "static/media/{your_image_name.ext} en suivant la notation"

options: {nom: "statique/média/[nom]. [hachage: 8]. [ext]"} "

puis importé cette image comme

importer InstanceName depuis "static/media/my_logo.png";

Piratage heureux.

0
Ali Raza