如何在反應中使用帶有變量名的 require()？

Question

我已經閱讀了許多關於堆棧溢出和博客的解決方案，但沒有一個可以解決我的問題。 我有來自 api 的圖片網址。 這不常見，但對我來說是一項任務

   productsdata= {
        id: 12,
        title: "Cat Tee Black T-Shirt",
        description: "4 MSL",
        availableSizes: ["S", "XS"],
        style: "Black with custom print",
        price: 10.9,
        installments: 9,
        currencyId: "USD",
        currencyFormat: "$",
        isFreeShipping: true,
        src_1: "../../assets/113_1.jpg",
        src_2: "../../assets/113_2.jpg"
      },

在這里我將圖像顯示為

{productsdata.map(product => {
        return (
          <>
            <img src={product.src_1} width="200" height="200" alt="tshirt" />
            {/* <img src={product.src_2} width="200" height="200" /> */}
          </>
        );
      })}

但它不起作用，因為require()僅適用於靜態 url。 有人可以幫助我嗎？

Answer 1

你應該像這樣使用-

 import React, {useState} from 'react'; import Products from './old'; const New = (props) =>{ return( <div> {Products.map((Product, i)=>( Object.values(Product).map((prod, i) => ( <div key={i}> <p>id: {prod.id}</p> <p>category: {prod.category}</p> <p>filename: {prod.filename}</p> <p>name: {prod.name}</p> <p>price: {prod.price}</p> </div> )) ) )} </div> ); } export default New;

Answer 2

我將圖像網址更改為

 productsdata= {

        src_1: "113_1.jpg",
        src_2: "113_2.jpg"
      },

並將“src”屬性更改為

 <img src={require(`../../assets/${product.src_1}`)} width="200" height="200" alt="tshirt" />

它工作得很好。 這里的“要求”也使用變量和動態 url。 地球上誰會想到這樣寫。 我認為這是javascript中的一個錯誤或者我沒有足夠的理解：p