菩萨摩诃萨-影像- 
说明
这个 psammead-image 组件有两个可用的图像。 默认为样式 img 使用样式组件的元素.
有另一种 AMP 图像可以使用 。 是反应组件返回 amp-img 键.
何时使用此组件
此组件可以在页面的任意点使用.
安装
npm install @bbc/psammead-image
使用量
错误
导入标准图像组件 <img /> 标签.
import Image from '@bbc/psammead-image';
const WrappingContainer = ({ alt, src, height, width, sizes }) => (
<Img alt={alt} src={src} height={height} width={width} sizes={sizes} fade />
);
缩写
如果你要用这个 AmpImg 构成部分, 请在此读取 AMP 文件 详细情况.
Amp 图像组件生成 <amp-img> 标签.
示例
import { AmpImg } from '@bbc/psammead-image';
const WrappingContainer = ({ alt, src, height, width, sizes }) => (
<AmpImg
alt={alt}
layout="responsive"
sizes={sizes}
src={src}
height={height}
width={width}
/>
);
道具
错误
| Prop | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
alt | 字符串 | 对 | - 说吧 | "猫的照片" |
height | 数字/字符串 | 没有 | 无效 | 450个 |
sizes | 字符串 | 没有 | 无效 | "100vw" (英语) |
src | 字符串 | 对 | - 说吧 | "https://bbc.com/300/cat.jpg" (中文(简体) ) |
srcset | 字符串 | 没有 | 无效 | "https://bbc.com/300/cat.jpg.webp 300w,","中国共产党党史人物辞典", https://bbc.com/450/cat.jpg.webp 页面存档备份,存于互联网档案馆 450维, https://bbc.com/600/cat.jpg.webp 页面存档备份,存于互联网档案馆 六百维" |
fallbackSrcset | 字符串 | 没有 | 无效 | "https://bbc.com/300/cat.jpg 300w," 互联网档案馆的存檔,存档日期2013-12-21, https://bbc.com/450/cat.jpg (英语) 450维, https://bbc.com/600/cat.jpg (英语) 六百维" |
primaryMimeType | 字符串 | 没有 | 无效 | "图像/网络" |
fallbackMimeType | 字符串 | 没有 | 无效 | "图像/jpeg" |
width | 数字/字符串 | 没有 | 无效 | 600个 |
fade | 布尔 | 没有 | 虚假 | 真实 |
这个 height 财务报告和审定财务报表 width 道具是可选的,在某些情况下可以保留您可能指定的图像比例 height 或者说 width 然后让浏览器相应缩放图像.
然而,当未指定时,浏览器将无法确定图像大小,因此,浏览器会根据您拥有的图像数量,两次或多次构建页面. 第一种颜料是浏览器显示所有文字,一旦图像被下载并大小决定了第二种颜料来将文字包裹在图像周围.
指定 width 财务报告和审定财务报表 height 允许浏览器为图像预留空间,在图像被装入时防止内容移动.
这个 srcset prop是可选的,因为有些工程可能不想在图像上使用srcset属性.
这个 sizes prop是可选的,因为有些工程可能不想在图像上使用大小属性.
这个 fade 道具是可选的,并设定为 false 默认。 它被用来在动画片上应用"淡出"的效果 Img 组件.
缩写
| Prop | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
alt | 字符串 | 对 | - 说吧 | "猫的照片" |
attribution | 字符串 | 没有 | '' | "Getty图像" |
height | 数字/字符串 | 对 | 无效 | 450个 |
layout | 字符串 | 对 | - 说吧 | "响应" |
sizes | 字符串 | 没有 | 无效 | "100vw" (英语) |
src | 字符串 | 对 | - 说吧 | "https://bbc.com/300/cat.jpg" (中文(简体) ) |
srcset | 字符串 | 没有 | 无效 | "https://bbc.com/300/cat.jpg.webp 300w,","中国共产党党史人物辞典", https://bbc.com/450/cat.jpg.webp 页面存档备份,存于互联网档案馆 450维, https://bbc.com/600/cat.jpg.webp 页面存档备份,存于互联网档案馆 六百维" |
fallbackSrcset | 字符串 | 没有 | 无效 | "https://bbc.com/300/cat.jpg 300w," 互联网档案馆的存檔,存档日期2013-12-21, https://bbc.com/450/cat.jpg (英语) 450维, https://bbc.com/600/cat.jpg (英语) 六百维" |
width | 数字/字符串 | 对 | - 说吧 | 600个 |
这个 attribution 道具可用以字符串通过以包含图像源. 关于进一步详情,请参见本报告附件 amp-img 属性文件。 。 。 .
这个 layout 道具可以是数种之一,包括: responsive, (中文(简体) ), fixed, (中文(简体) ), intrinsic 包括: 我们建议使用 responsive 用于大多数用例 height 财务报告和审定财务报表 width 道具传入,因此AMP可以使用正确的比例来缩放图像. 详情请参见AMP文件。 。 。 .
这个 srcset proc是一个有逗号分隔的图像URL的字符串,大小不一. 详情请参见MDN文件。 。 。 .
这个 sizes 道具是包含逗号分离字符串列表的字符串,表示一组源大小. 详情请参见MDN文件。 。 。 .
无障碍说明
本构成部分要求 alt 属性来描述图像。 这个 alt 对于辅助技术的用户来说,文本至关重要,对于互联网连接如此缓慢的用户,浏览器决定制作文本而不是图像.
一些图像纯粹是描述性的,在这种情况下,a alt 属性仍然必须被传递,但值将是空字符串 : ""。 。 。 .
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .