我在堆栈溢出和博客上阅读了许多解决方案，但没有一个可以解决我的问题。 我有来自 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。 有人可以帮助我吗？

我将图像网址更改为

 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" />

效果很好。这里“require”也使用变量和动态 url。到底谁会想到这样写。我认为这是 javascript 中的一个错误或者我没有足够的理解：p