React Js - 动态获取json数组图片到JSX页面的反应。

Question

state = {
  products: [
    {
      img: "'./images/heartstud.jpg'",
      name: "Heart Earrings",
      price: "1.99",
      total: "3.98",
      count: 2,
      description:
        "Yellow Chimes Crystals from Classic Designer Gold Plated Stylish Hoop Earrings for Women and Girls",
    },
    {
      img: "./images/heartstud.jpg",
      name: "Orange",
      attribution: "visualhunt",
      price: "0.99",
      count: 1,
      description:
        "PANASH Woman's Stylish/Fashion Gold-plated Beaded Handcrafted Chandbalis Trendy Party/Festive/Wedding Wear Earrings",
    },
    {
      img: "./images/heartstud.jpg",
      name: "Pear",
      price: "6.00",
      count: 4,
      description:
        "Valentine Gift By Shining Diva Italian Designer Non Precious Metal Jewellery Set for Women",
    },
  ],
};

我的HTML是这样的，我想从上面的产品JSON数组中调用Image，但使用这个要求我只能静态地给它，而不能从数组中给它

<div class="row">
  {this.state.products.map((product) => (
    <div class="col-lg-4 col-md-6 mb-4">
      <div class="card h-100">
        <a href="#">
          <img class="card-img-top" src={require("./images/ring.jpg")} alt="" />
        </a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#">{product.name}</a>
          </h4>
          <h5>${product.price}</h5>
          <p class="card-text">{product.description}</p>
        </div>
      </div>
    </div>
  ))}
</div>;

代替静态 Imageurl 我想使用 {product.img} 作为其他元素的使用.使用require，我能够得到静态的图像，但不能从状态json数据映射...善良的帮助。

Answer 1

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          img: "https://via.placeholder.com/600/92c952",
          name: "Heart Earrings",
          price: "1.99",
          total: "3.98",
          count: 2,
          description:
            "Yellow Chimes Crystals from Classic Designer Gold Plated Stylish Hoop Earrings for Women and Girls"
        },
        {
          img: "https://via.placeholder.com/600/771796",
          name: "Orange",
          attribution: "visualhunt",
          price: "0.99",
          count: 1,
          description:
            "PANASH Woman's Stylish/Fashion Gold-plated Beaded Handcrafted Chandbalis Trendy Party/Festive/Wedding Wear Earrings"
        },
        {
          img: "https://via.placeholder.com/600/771766",
          name: "Pear",
          price: "6.00",
          count: 4,
          description:
            "Valentine Gift By Shining Diva Italian Designer Non Precious Metal Jewellery Set for Women"
        }
      ]
    };
  }
  render() {
    return (
      <div class="row">
        {this.state.products.map(product => (
          <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
              <img
                class="card-img-top"
                src={product.img}
                alt=""
                width="100px"
              />
              <div class="card-body">
                <h4 class="card-title">{product.name}</h4>
                <h5>${product.price}</h5>
                <p class="card-text">{product.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

检查这个，它的工作正常。不需要为迭代添加require.工作链接 点击这里

Answer 2

当使用Webpack时（假设你 用CRA引导你的项目)，像这样的路径 ./images/ring.jpg 仅在构建时可用。

在运行时，使用。

// product.img = "./images/heartstud.jpg";
<img class="card-img-top" src={require(product.img)} alt="" />

或者事先导入路径。

import heartstud from "./images/heartstud.jpg";

// v generated from webpack in build
console.log(heartstud); // /heartstud.84287d09.jpg

state = {
  products: [
    {
      img: heartstud,
    },
  ],
};

<img class="card-img-top" src={product.img} alt="" />

参见 在CRA中添加图片.

请注意，您有一个错别字："'.imagesheartstud.jpg'"（一个额外的 ')