Srcset 在 React 反应光滑的旋转木马中不起作用

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，我将在下面提供示例。

不是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>

我尝试 re-produce 你的问题：https://codesandbox.io/s/7k51x38lz6

在其中拉伸并刷新浏览器以查看结果，没有./gallery.css（您可以自己在src目录中新建文件），它不会确实运行正常，但足以说明如何解决问题。

顺便提一下推广时间

这几天发布了一个react轮播组件，它可以很好地处理可变宽度和高度的图像，但遗憾的是它还不支持 "fade" 效果，这是它可以用你的例子做的： https://codesandbox.io/s/o9ymmnmkx6

Repository

下次你需要旋转木马的时候，也许你可以用它做点什么:)

Srcset 在 React 反应光滑的旋转木马中不起作用

Srcset not working in React react-slick carousel

html

css

reactjs

react-slick