Srcset не работает в React-Slick Carousel

Question

Я использую React-Slick в качестве карусели изображений и пытаюсь заменить изображение другим, когда размер экрана уменьшается. Я хотел сделать это с помощью srcset, а не пытаться взломать какое-то решение для фонового изображения. Тем не менее, всякий раз, когда я пытаюсь, появляется только первое изображение в srcset, и изображение не изменяется при изменении ширины экрана. Я попытался обновить страницу и все еще получить то же изображение. Как я могу переключать изображение быстро, используя srcset (и если это не работает с помощью другой техники) на определенной ширине экрана.

Я включил код ниже. Я извиняюсь, потому что это React, поэтому я не смог сделать фрагмент кода.

<div className="imtxt"><img className="person" src='https://preview.ibb.co/dpZWrS/Programming.jpg' srcset="https://preview.ibb.co/dpZWrS/Programming.jpg 1000w, https://preview.ibb.co/fuL4BS/learn_fast.jpg 700w"/><div className="nm"><span><h1>Works Hard</h1><p>I don't give up until I've figured it out.</p></span></div></div> 

^^ КОНКРЕТНОЕ ИЗОБРАЖЕНИЕ, КОТОРОЕ Я ПЫТАЮСЯ ОТВЕТИТЬ

import React from 'react'
import ReactDOM from 'react-dom'
import Slider from 'react-slick'
import './gallery.css';

class Gallery extends React.Component {
  render () {
    var settings = {
      slidesToShow: 1,
      dots: true,
      slidesToScroll: 1,
      swipe: true,
      autoplay: true,
      fade: true,
    };

    return (
      <div className="container">
        <Slider {...settings} arrows={true} >
          <div className="imtxt"><img className="person" src='https://preview.ibb.co/dpZWrS/Programming.jpg' srcset="https://preview.ibb.co/dpZWrS/Programming.jpg 1000w, https://preview.ibb.co/fuL4BS/learn_fast.jpg 700w"/><div className="nm"><span><h1>Works Hard</h1><p>I don't give up until I've figured it out.</p></span></div></div>
          <div id="imtxt2" className="imtxt"><img src='https://preview.ibb.co/ejUbRS/Webp_net_resizeimage_1.jpg' /><div className="nm"><span class="spn"><h1>Awesome Skills</h1><p>I love to code, and I'm great at it.</p></span></div></div>
          <div className="imtxt"><img src='https://preview.ibb.co/fuL4BS/learn_fast.jpg' /><div className="nm"><span><h1>Fast Learner</h1><p>I'm a fast learner and excited to learn new things.</p></span></div></div> 
        </Slider>
      </div>
    );
  }
}

Answer 1

Для демонстрации реагирующего кода используйте CodeSandbox, ниже я приведу пример.

Это не проблема практики реактивного удара, это о srcset, Может быть, вы должны изучить эту тему, есть много причин, по которым srcset не будет работать, как ожидалось, т.е. кеширование браузера.

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

Реформируя свой первый элемент:

  <div className="imtxt">
      {(window.innerWidth > 700) ? (
          <img src="https://preview.ibb.co/dpZWrS/Programming.jpg" />
       ) : (
          <img src="https://preview.ibb.co/fuL4BS/learn_fast.jpg" />
       )}
       <div className="nm">
       <span>
           <h1>Works Hard</h1>
           <p>I don't give up until I've figured it out.</p>
       </span>
    </div>
  </div>

Я пытаюсь воспроизвести вашу проблему здесь: https://codesandbox.io/s/7k51x38lz6

Протяните и обновите браузер в нем, чтобы увидеть результат, без ./gallery.css (вы можете создать новый файл в src dir самостоятельно), он не работает нормально, но достаточно, чтобы показать, как решить проблему.

Кстати за продвижение времени

---

В эти дни я выпустил компонент реагирующей карусели, он хорошо обрабатывает изображения переменной ширины и высоты, но жаль, что он пока не поддерживает эффект "затухания", это то, что он мог бы сделать с вашим примером: https://codesandbox.io/s/o9ymmnmkx6

вместилище

Может быть, вы могли бы сделать что-то с этим, когда вам понадобится карусель в следующий раз:)