React项目中hero-slider滑块功能正常但图片不显示的解决求助

我开发了一个小型React应用，使用hero-slider实现图片轮播组件。当前滑块功能及背景色可正常显示，但图片无法加载。项目无报错与警告，希望解决图片显示问题。

相关代码 #

basicslider.js #

import React from "react";
import HeroSlider, { Slide, Nav } from "hero-slider";

// Images
const bogliasco = "https://i.imgur.com/Gu5Cznz.jpg";
const countyClare = "https://i.imgur.com/idjXzVQ.jpg";
const craterRock = "https://i.imgur.com/8DYumaY.jpg";
const giauPass = "https://i.imgur.com/8IuucQZ.jpg";

const BasicSlider = () => {
  return (
    <HeroSlider
      slidingAnimation="left_to_right"
      orientation="horizontal"
      initialSlide={1}
      onBeforeChange={(previousSlide, nextSlide) =>
        console.log("onBeforeChange", previousSlide, nextSlide)
      }
      onChange={nextSlide => console.log("onChange", nextSlide)}
      onAfterChange={nextSlide => console.log("onAfterChange", nextSlide)}
      style={{
        backgroundColor: "rgba(0, 0, 0, 0.33)"
      }}
      settings={{
        slidingDuration: 250,
        slidingDelay: 100,
        shouldAutoplay: true,
        shouldDisplayButtons: true,
        autoplayDuration: 5000,
        height: "100vh"
      }}
    >
      <Slide
        background={{
          backgroundImage: giauPass,
          backgroundAttachment: "fixed"
        }}
      />
      <Slide
        background={{
          backgroundImage: bogliasco,
          backgroundAttachment: "fixed"
        }}
      />
      <Slide
        background={{
          backgroundImage: countyClare,
          backgroundAttachment: "fixed"
        }}
      />
      <Slide
        background={{
          backgroundImage: craterRock,
          backgroundAttachment: "fixed"
        }}
      />
      <Nav />
    </HeroSlider>
  );
};

export default BasicSlider;

app.js #

import React from 'react'
import './app.css'
import BasicSlider from './containers/basicslider/BasicSlider';

const App = () => {
  return (
    <div className='App'>
      <BasicSlider/>
    </div>
  )
}

export default App

index.js #

import React from "react";
import ReactDOM from "react-dom";

import "./index.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

问题出在Slide组件的backgroundImage属性值格式上。CSS的background-image属性要求值必须用url()包裹，你直接传入图片地址字符串会导致浏览器无法正确解析。

修改basicslider.js中所有Slide的backgroundImage值，给每个图片地址加上url()：

<Slide
  background={{
    backgroundImage: `url(${giauPass})`,
    backgroundAttachment: "fixed"
  }}
/>
<Slide
  background={{
    backgroundImage: `url(${bogliasco})`,
    backgroundAttachment: "fixed"
  }}
/>
<Slide
  background={{
    backgroundImage: `url(${countyClare})`,
    backgroundAttachment: "fixed"
  }}
/>
<Slide
  background={{
    backgroundImage: `url(${craterRock})`,
    backgroundAttachment: "fixed"
  }}
/>

修改后浏览器就能正确识别图片地址并加载图片。

内容的提问来源于stack exchange，提问作者Shadhin mia