代码之家 › 专栏 › 技术社区 › learner

使用react bootstrap carousal组件

reactjs javascript

learner · 技术社区 · 7 年前

我尝试使用下面教程中给出的react carousel组件:

在文章中,我看到图像是从路径加载的:

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

是什么 holder.js 在这里,教程没有提到这个javascript包含什么。另外,图像的扩展名应该是JPG或PNG等,而不是JS,所以教程说他们有图像 霍尔德 ?

你能帮我理解一下吗?

1 回复 | 直到 7 年前

AndyJ 7 年前

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"

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

12 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

12 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前