Как я могу увидеть увеличенное изображение, когда я нажимаю на фактическое изображение? - PullRequest
Новая
       1

Как я могу увидеть увеличенное изображение, когда я нажимаю на фактическое изображение?

0 голосов
/ 22 сентября 2019

Как мне достичь src={img.urls.small} на моем модальном изображении?Похоже, он говорит, что img не определено , что является правдой, но я не знаю, как заставить это работать на моем модальном представлении. 

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;

1 Ответ

0 голосов
/ 22 сентября 2019

Я не уверен, в чем проблема, но, к сожалению, я не могу комментировать, чтобы спросить.Я думаю, что вы пытаетесь найти правильную структуру объекта для вашего массива изображений? 

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"
    }
  }
];
...