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。也许你应该研究这个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目录中新文件），它实际上并不正常，但是足以说明如何解决问题。

顺便提一下

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

Repository

下次你需要轮播时，也许你可以用它做一些事情：）

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

1 个答案: