0

我正在使用 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>
    );
  }
}
4

1 回答 1

0

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

这不是 react-slick 实践的问题，而是关于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 目录中新建文件），它实际上并不能正常运行，但足以说明如何解决问题。

顺便说一句，促进时间

这些天我发布了一个反应轮播组件，它可以很好地处理可变宽度和高度的图像，但遗憾的是它还不支持“淡入淡出”效果，这就是它可以用你的例子做的： https ://codesandbox.io/ s/o9ymmnmkx6

存储库

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

于 2018-02-21T06:44:57.647 回答