Srcset在React React Slick轮播中不起作用

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

为了演示React代码，请使用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中的新文件 ），它实际上无法正常运行，但足以显示如何解决问题。

顺便提一下时间

---

这些天，我发布了一个React Carousel组件，它可以很好地处理可变宽度和高度的图像，但是很遗憾，它还不支持“淡入淡出”效果，这可以通过您的示例来完成： https : //codesandbox.io/ s / o9ymmnmkx6

资料库

下次当您需要轮播时，也许可以使用它来做一些事情:)