Question

如何在图像模式视图中到达src={img.urls.small}？看起来它说 img未定义，这是正确的，但我不知道如何使它在Modal视图中工作。

const Photos = ({ images }) => {
      const [hovered, setHovered] = useState(false);

      const Dialog = styled.div`
        background: white;
        border-radius: 5px;
        padding: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      `;

      return (
        <section>
          <h1>PHOTOGRAPHY</h1>
          {images &&
            images.map(img => (
              <li key={img.id} data-key={img.id} onClick={() => setHovered(true)}>
                <img
                  className="grid__item"
                  alt={img.alt_description}
                  src={img.urls.small}
                />
              </li>
            ))}
          {hovered && (
            <Dialog onClick={() => setHovered(false)}>
              <p>
                <span role="img" aria-label="tada">
                  ?
                </span>
              </p>
              CLOSE MODAL
            </Dialog>
          )}
        </section>
      );
    };

    export default Photos;

Answer 1

我不确定问题出在哪里，但是不幸的是我无法发表评论。我认为您正在尝试为图像数组找到正确的对象结构？

var images = [
  {
    urls: {
      small: "path/to/your/small_image.png",
      big: "path/to/your/big_image.png"
    }
  },
  {
    urls: {
      small: "path/to/your/small_image2.png",
      big: "path/to/your/big_image2.png"
    }
  }
];

单击实际img时如何查看放大的图像

1 个答案: