错误：来自 REACT 中另一个图像文件夹的图像数组循环

Question

我想让购物应用程序做出反应，但我做错了我不知道的事情。错误是什么？ 我想导入图像并根据“sku 编号”循环它们，但我只是获取图像的标题。我看不到图像，我无法获取它们。

<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />

这是获取代码。我已经尝试过，我正在尝试不同的代码来获取，但它不起作用。 Products.js：

import React, { Component } from "react";
import a from "./a.json";
import "./styles.css";

class Products extends Component {
  state = {
    products: a.products
  };

  render() {
    const productItems = this.state.products.map(product => (
      <div className="col-md-4">
        <div
          className="thumbnail text-center"
          style={{ backgroundColor: "black" }}
        >
          <a href={product.id} onClick={this.props.handleAddToCart}>
            <img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
          </a>
        </div>
      </div>
    ));
    return <div className="row">{productItems}</div>;
  }
}
export default Products;

还有文件夹的视线：

以及用于匹配照片名称的 sku 编号。

页面的景象

Answer 1

尝试更改此行：

<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />

为：

<img src={`../src/images/${product.sku}.jpg`} alt={product.title} />

为了让您将 Javascript 嵌入到任何 React 组件中，请记住始终将您的代码块括在 {brackets} 中。由于反引号属于 Javascript 语法，所以必须加上括号。