web-dev-qa-db-ja.com

画像を動的にインポートする（React Js）（必要なimgパスがモジュールを見つけられない）

画像（複数）をマップメソッドで動的にインポートする必要があります。まず、ベースURLを画像ファイルに設定し、次に、画像プロパティを含むJSONファイルから画像の名前を読み取り、それに応じて画像srcを設定します。 JSONファイルは次のようになります。

{
      "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"
    },

私の画像フォルダ： enter image description here

完全に機能するreduxの製品を読みました=>

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

console.log（）=> enter image description here

次に、mapメソッドでJSONファイルから画像の名前を追加して、後で画像srcとして使用するこのようなベースURLを定義します。

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}
    />
  );
});

私の写真コンポーネントは以下のようになります：

  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;

残念ながら、私はこのエラーに直面しました： enter image description here 事前に感謝し、私の悪い英語をごめんなさい:)

javascriptreactjsecmascript-6base-url
11
Vahid

だからここに私が見つけたものがあり、それは私のために働いた。 Mオン

「ファイルローダー」：「4.3.0」、反応：16.12

。あなたのターミナルでこれを実行してください：

npm run eject

ファイルローダーをチェックインする

config/webpack.config

ファイルローダーの構成を見つけました。私がしたことは、「static/media/{your_image_name.ext}」というディレクトリを作成し、そこに「

オプション：{名前： "static/media/[name]。[hash：8]。[ext]"} "

次に、この画像を次のようにインポートしました

「static/media/my_logo.png」からInstanceNameをインポートします。

ハッピーハッキング。

0
Ali Raza