Question

我正在尝试使用以下教程中给出的React轮播组件：

在帖子中，我看到图像是从路径加载的：

<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=282c34"
alt="Third slide"
/>

这里的holder.js是什么，本教程没有提到此javascript包含的内容。另外，图片的扩展名应为jpg或png等而不是js，因此本教程说它们的图片为holder.js？

您能帮助我理解它吗？

Answer 1

holder.js是客户端占位符图像生成器。

轮播工作并不是必需的，它只是生成轮播显示的图像。这样一来，他们可以进行出色的演示，而无需手动制作/查找一堆图像。

src="holder.js/800x400?text=Second slide&bg=282c34"告诉img元素从图像生成器加载图像。

800x400是生成的图像的大小。
Second slide是要放入生成的图像中的文本。
282c34是生成的图像的背景色。

您应将src设置为您要显示的图像的URL。

例如

src="MyContentDirectory/MyImage.jpg"
src="MyImageApi/GetImage/MyImage.jpg"
src="https://example.com/somethirdpartysiteimage.jpg"