react-slideshow-image 包不从 google 驱动器加载图像

Question

我已经尝试了两天来制作 react-slideshow-image 包的正面或反面。我已经手动安装了所有缺少的依赖项，我尝试移动图像文件夹（尽管 src 之外的任何东西都会立即抛出错误......），我还尝试将我的图像上传到外部 google 驱动器和用他们的链接替换示例中给出的链接。我已经禁用了 App.js.

中的所有其他组件

底线：只有当我使用示例中提供的图像链接时，该包才有效。没有检测到其他图像。

这是我的代码（从示例中复制粘贴）：

import { Fade } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
// import images from "./images/homepage";

const fadeImages = [
  "https://drive.google.com/file/d/1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ/view?usp=sharing",
  "https://drive.google.com/file/d/11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP/view?usp=sharing",
  "https://drive.google.com/file/d/1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN/view?usp=sharing"
  // "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
  // "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
];

export default function App() {
  return (
    <div className="slide-container">
      <Fade>
        <div className="each-fade">
          <img src={fadeImages[0]} alt="" />
        </div> 
        <div className="each-fade">
          <img src={fadeImages[1]} alt="" />
        </div>
        <div className="each-fade">
          <img src={fadeImages[2]} alt=""/>
        </div>
      </Fade>
    </div>
  );
}

原始的 unspalsh 图片链接已被注释掉以查看我的链接是否有效，但它们无效。使用提供的图像以外的图像似乎会使滑块完全崩溃。 screenshot of live server view of my webstie

App.js 正确呈现，控制台不会记录单个故障。

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
// import Carousel from "./components/main/Carousel.js";

// const divStyle = {
//   position: "absolute"
// }

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

我做错了什么？

Answer 1

您需要存储图片 ID 并使用不同的路径来获取图片 url https://drive.google.com/uc?id="<file-id>:

const fadeImages = [
  "1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ",
  "11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP",
  "1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN"
];

const PATH = "https://drive.google.com/uc?id=";

然后：

export default function App() {
  return (
    <div className="slide-container">
      <Fade>
        {fadeImages.map(src => (
             <div className="each-fade">
               <img src={`PATH${src}`} alt="" />
             </div> ))
        }
      </Fade>
    </div>
  );
}

react-slideshow-image 包不从 google 驱动器加载图像

react-slideshow-image package not loading images from google drive

javascript

image

google-drive-api

reactjs

react-slideshow-image