Srcset 在 React react-slick carousel 中不起作用

Posted 2023-02-25

【中文标题】Srcset 在 React react-slick carousel 中不起作用

【英文标题】：Srcset not working in React react-slick carousel

【发布时间】：2018-02-16 21:18:23

【问题描述】：

我正在使用 React-Slick 作为图像轮播，并且在屏幕尺寸缩小时尝试将图像分出另一个图像。我想用 srcset 来做这件事，而不是试图拼凑一些背景图像解决方案。但是，每当我尝试时，只会出现 srcset 中的第一张图像，并且当屏幕宽度发生变化时，图像不会改变。我试过刷新页面，仍然得到相同的图像。如何在特定的屏幕宽度下使用 srcset （如果这不能通过另一种技术工作）响应地切换图像。

我已包含以下代码。我很抱歉，因为它是 React，所以我无法编写代码 sn-p。

<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>
    );
  

【参考方案1】：

要演示反应代码，请使用 CodeSandbox，我将在下面提供示例。

不是react-slick练习的问题，是srcset的问题。 也许你应该研究一下这个thread，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 轮播组件， 它可以很好地处理可变宽度和高度的图像，但遗憾的是它还不支持“淡入淡出”效果，这就是它可以用你的例子做的： https://codesandbox.io/s/o9ymmnmkx6

Repository

也许你下次需要轮播时可以用它做点什么:)