离子 - img./H1>
IMG是一个标签,当标签处于视口中时,将懒惰地加载图像。当生成大型列表时,这是非常有用的,因为仅在可见时才加载图像。组件使用a href="https://caniuse.com/" c-id="146.13.5.1">
交叉口观察者/a>
内部,在大多数现代浏览器中支持,但返回A.code c-id="146.16.5.3">
索取/code>
当不支持时。/p>
用法/a>
离子清单/span>
>
离子项目/span>
* Ngfor./span>
=
“/span>
让项目项目span class="token punctuation" c-id="146.52.11.3">
“/span>
>
离子缩略图/span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.71.11.3">
“/span>
>
离子 - img./span>
[SRC]/span>
=
“/span>
item.src.span class="token punctuation" c-id="146.90.11.3">
“/span>
>
/span>
离子 - img./span>
>
/span>
离子缩略图/span>
>
离子标签/span>
>
{{item.text}}span class="token tag" c-id="146.118.9.13">
/span>
离子标签/span>
>
/span>
离子项目/span>
>
/span>
离子清单/span>
>
进口/span>
反应span class="token keyword" c-id="146.151.9.2">
从/span>
'反应'/span>
;/span>
进口/span>
{
离子列表span class="token punctuation" c-id="146.165.9.11">
那/span>
IonItem.span class="token punctuation" c-id="146.168.9.13">
那/span>
ionthumbnail.span class="token punctuation" c-id="146.171.9.15">
那/span>
Ionimg.span class="token punctuation" c-id="146.174.9.17">
那/span>
Ionlabel.span class="token punctuation" c-id="146.177.9.19">
那/span>
离子联系span class="token punctuation" c-id="146.180.9.21">
}
从/span>
'@betway东盟体育app离子/反应'/span>
;/span>
类型/span>
物品span class="token operator" c-id="146.194.9.30">
=
{
SRC.span class="token operator" c-id="146.200.9.34">
:/span>
细绳/span>
;/span>
文本span class="token operator" c-id="146.208.9.39">
:/span>
细绳/span>
;/span>
}
;/span>
Const./span>
项目span class="token operator" c-id="146.224.9.49">
:/span>
物品span class="token punctuation" c-id="146.227.9.51">
[
]
=
[
{
SRC.span class="token operator" c-id="146.240.9.59">
:/span>
'http://pluekten.com/g/200/300'/span>
那/span>
文本span class="token operator" c-id="146.248.9.64">
:/span>
“一只猫的照片”/span>
}
]
;/span>
出口/span>
Const./span>
imgexample.span class="token operator" c-id="146.267.9.76">
:/span>
反应span class="token punctuation" c-id="146.270.9.78">
。/span>
FC./span>
=
(/span>
的)/span>
=>/span>
(/span>
离子联系/span>
>
离子列表/span>
>
{
项目span class="token punctuation" c-id="146.312.9.96">
。/span>
地图/span>
(/span>
(/span>
图片span class="token punctuation" c-id="146.322.10.1">
那/span>
一世
的)/span>
=>/span>
(/span>
IonItem./span>
钥匙/span>
=
{
一世span class="token punctuation" c-id="146.349.11.3">
}
>
ionthumbnail./span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.370.11.3">
“/span>
>
Ionimg./span>
SRC./span>
=
{
图片span class="token punctuation" c-id="146.391.11.3">
。/span>
SRC.span class="token punctuation" c-id="146.394.11.5">
}
/>/span>
/span>
ionthumbnail./span>
>
Ionlabel./span>
>
{
图片span class="token punctuation" c-id="146.422.9.118">
。/span>
文本span class="token punctuation" c-id="146.425.9.120">
}
/span>
Ionlabel./span>
>
/span>
IonItem./span>
>
的)/span>
的)/span>
}
/span>
离子列表/span>
>
/span>
离子联系/span>
>
的)/span>
;/span>
进口/span>
{
零件span class="token punctuation" c-id="146.490.9.4">
那/span>
Hspan class="token punctuation" c-id="146.493.9.6">
}
从/span>
'@模板/核心'/span>
;/span>
@span class="token function" c-id="146.504.9.13">
零件/span>
(/span>
{
标签span class="token operator" c-id="146.511.9.17">
:/span>
'img-example'/span>
那/span>
styleurl.span class="token operator" c-id="146.519.9.22">
:/span>
'img-example.css'/span>
}
的)/span>
出口/span>
班级/span>
imgexample./span>
{
私人的/span>
项目span class="token operator" c-id="146.545.9.39">
=
[
{
'文本'/span>
:/span>
'第1件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第2件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第3'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
]
;/span>
使成为/span>
(/span>
的)/span>
{
返回/span>
[
离子清单/span>
>
{
这/span>
。/span>
项目span class="token punctuation" c-id="146.662.9.107">
。/span>
地图/span>
(/span>
物品/span>
=>/span>
离子项目/span>
>
离子缩略图/span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.697.11.3">
“/span>
>
离子 - img./span>
SRC./span>
=
{
物品span class="token punctuation" c-id="146.717.11.3">
。/span>
SRC.span class="token punctuation" c-id="146.720.11.5">
}
>
/span>
离子 - img./span>
>
/span>
离子缩略图/span>
>
离子标签/span>
>
{
物品span class="token punctuation" c-id="146.752.9.126">
。/span>
文本span class="token punctuation" c-id="146.755.9.128">
}
/span>
离子标签/span>
>
/span>
离子项目/span>
>
的)/span>
}
/span>
离子清单/span>
>
]
;/span>
}
}
模板/span>
>
离子清单/span>
>
离子项目/span>
v-for./span>
=
“/span>
项目中的项目span class="token punctuation" c-id="146.835.11.3">
“/span>
:钥匙/span>
=
“/span>
item.src.span class="token punctuation" c-id="146.846.11.3">
“/span>
>
离子缩略图/span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.865.11.3">
“/span>
>
离子 - img./span>
:SRC./span>
=
“/span>
item.src.span class="token punctuation" c-id="146.884.11.3">
“/span>
>
/span>
离子 - img./span>
>
/span>
离子缩略图/span>
>
离子标签/span>
>
{{item.text}}span class="token tag" c-id="146.912.9.15">
/span>
离子标签/span>
>
/span>
离子项目/span>
>
/span>
离子清单/span>
>
/span>
模板/span>
>
脚本/span>
>
进口/span>
{
Ionimg.span class="token punctuation" c-id="146.960.11.5">
那/span>
IonItem.span class="token punctuation" c-id="146.963.11.7">
那/span>
Ionlabel.span class="token punctuation" c-id="146.966.11.9">
那/span>
离子列表span class="token punctuation" c-id="146.969.11.11">
那/span>
ionthumbnail.span class="token punctuation" c-id="146.972.11.13">
}
从/span>
'@betway东盟体育app ionic / vue'/span>
;/span>
进口/span>
{
绝缘组分span class="token punctuation" c-id="146.989.11.24">
}
从/span>
'vue'/span>
;/span>
出口/span>
默认/span>
绝缘组分/span>
(/span>
{
成分span class="token operator" c-id="146.1013.11.39">
:/span>
{
Ionimg.span class="token punctuation" c-id="146.1019.11.43">
那/span>
IonItem.span class="token punctuation" c-id="146.1022.11.45">
那/span>
Ionlabel.span class="token punctuation" c-id="146.1025.11.47">
那/span>
离子列表span class="token punctuation" c-id="146.1028.11.49">
那/span>
ionthumbnail.span class="token punctuation" c-id="146.1031.11.51">
}
那/span>
设置/span>
(/span>
的)/span>
{
Const./span>
项目span class="token operator" c-id="146.1049.11.62">
=
[
{
'文本'/span>
:/span>
'第1件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第2件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第3'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
]
;/span>
返回/span>
{
项目span class="token punctuation" c-id="146.1140.11.118">
}
}
}
的)/span>
;/span>
/span>
脚本/span>
>
特性/a>
alt./H3>
描述/th>
此属性定义描述图像的替代文本。用户将看到显示此文本,如果图像URL是错误的,则图像不在支持的格式之一,或者如果尚未下载图像。
属性/th>
alt./code>
类型/th>
字符串|不明确的
SRC./H3>
描述/th>
图像URL。此属性是强制性的code>
/code>元素。/p>
属性/th>
SRC./code>
类型/th>
字符串|不明确的
事件/a>
姓名/th>
描述/th>
IonError./code>
当IMG无法加载时发出/td>
Ionimgdidload./code>
当图像加载时发出/td>
IonimgWillload./code>
设置了IMG SRC时发出/td>
CSS阴影部件/a>
姓名/th>
描述/th>
图片/code>
内部`img`元素。/td>
IMG是一个标签,当标签处于视口中时,将懒惰地加载图像。当生成大型列表时,这是非常有用的,因为仅在可见时才加载图像。组件使用a href="https://caniuse.com/" c-id="146.13.5.1"> 交叉口观察者/a> 内部,在大多数现代浏览器中支持,但返回A.code c-id="146.16.5.3"> 索取/code> 当不支持时。/p>
用法/a>
离子清单/span>
>
离子项目/span>
* Ngfor./span>
=
“/span>
让项目项目span class="token punctuation" c-id="146.52.11.3">
“/span>
>
离子缩略图/span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.71.11.3">
“/span>
>
离子 - img./span>
[SRC]/span>
=
“/span>
item.src.span class="token punctuation" c-id="146.90.11.3">
“/span>
>
/span>
离子 - img./span>
>
/span>
离子缩略图/span>
>
离子标签/span>
>
{{item.text}}span class="token tag" c-id="146.118.9.13">
/span>
离子标签/span>
>
/span>
离子项目/span>
>
/span>
离子清单/span>
>
进口/span>
反应span class="token keyword" c-id="146.151.9.2">
从/span>
'反应'/span>
;/span>
进口/span>
{
离子列表span class="token punctuation" c-id="146.165.9.11">
那/span>
IonItem.span class="token punctuation" c-id="146.168.9.13">
那/span>
ionthumbnail.span class="token punctuation" c-id="146.171.9.15">
那/span>
Ionimg.span class="token punctuation" c-id="146.174.9.17">
那/span>
Ionlabel.span class="token punctuation" c-id="146.177.9.19">
那/span>
离子联系span class="token punctuation" c-id="146.180.9.21">
}
从/span>
'@betway东盟体育app离子/反应'/span>
;/span>
类型/span>
物品span class="token operator" c-id="146.194.9.30">
=
{
SRC.span class="token operator" c-id="146.200.9.34">
:/span>
细绳/span>
;/span>
文本span class="token operator" c-id="146.208.9.39">
:/span>
细绳/span>
;/span>
}
;/span>
Const./span>
项目span class="token operator" c-id="146.224.9.49">
:/span>
物品span class="token punctuation" c-id="146.227.9.51">
[
]
=
[
{
SRC.span class="token operator" c-id="146.240.9.59">
:/span>
'http://pluekten.com/g/200/300'/span>
那/span>
文本span class="token operator" c-id="146.248.9.64">
:/span>
“一只猫的照片”/span>
}
]
;/span>
出口/span>
Const./span>
imgexample.span class="token operator" c-id="146.267.9.76">
:/span>
反应span class="token punctuation" c-id="146.270.9.78">
。/span>
FC./span>
=
(/span>
的)/span>
=>/span>
(/span>
离子联系/span>
>
离子列表/span>
>
{
项目span class="token punctuation" c-id="146.312.9.96">
。/span>
地图/span>
(/span>
(/span>
图片span class="token punctuation" c-id="146.322.10.1">
那/span>
一世
的)/span>
=>/span>
(/span>
IonItem./span>
钥匙/span>
=
{
一世span class="token punctuation" c-id="146.349.11.3">
}
>
ionthumbnail./span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.370.11.3">
“/span>
>
Ionimg./span>
SRC./span>
=
{
图片span class="token punctuation" c-id="146.391.11.3">
。/span>
SRC.span class="token punctuation" c-id="146.394.11.5">
}
/>/span>
/span>
ionthumbnail./span>
>
Ionlabel./span>
>
{
图片span class="token punctuation" c-id="146.422.9.118">
。/span>
文本span class="token punctuation" c-id="146.425.9.120">
}
/span>
Ionlabel./span>
>
/span>
IonItem./span>
>
的)/span>
的)/span>
}
/span>
离子列表/span>
>
/span>
离子联系/span>
>
的)/span>
;/span>
进口/span>
{
零件span class="token punctuation" c-id="146.490.9.4">
那/span>
Hspan class="token punctuation" c-id="146.493.9.6">
}
从/span>
'@模板/核心'/span>
;/span>
@span class="token function" c-id="146.504.9.13">
零件/span>
(/span>
{
标签span class="token operator" c-id="146.511.9.17">
:/span>
'img-example'/span>
那/span>
styleurl.span class="token operator" c-id="146.519.9.22">
:/span>
'img-example.css'/span>
}
的)/span>
出口/span>
班级/span>
imgexample./span>
{
私人的/span>
项目span class="token operator" c-id="146.545.9.39">
=
[
{
'文本'/span>
:/span>
'第1件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第2件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第3'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
]
;/span>
使成为/span>
(/span>
的)/span>
{
返回/span>
[
离子清单/span>
>
{
这/span>
。/span>
项目span class="token punctuation" c-id="146.662.9.107">
。/span>
地图/span>
(/span>
物品/span>
=>/span>
离子项目/span>
>
离子缩略图/span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.697.11.3">
“/span>
>
离子 - img./span>
SRC./span>
=
{
物品span class="token punctuation" c-id="146.717.11.3">
。/span>
SRC.span class="token punctuation" c-id="146.720.11.5">
}
>
/span>
离子 - img./span>
>
/span>
离子缩略图/span>
>
离子标签/span>
>
{
物品span class="token punctuation" c-id="146.752.9.126">
。/span>
文本span class="token punctuation" c-id="146.755.9.128">
}
/span>
离子标签/span>
>
/span>
离子项目/span>
>
的)/span>
}
/span>
离子清单/span>
>
]
;/span>
}
}
模板/span>
>
离子清单/span>
>
离子项目/span>
v-for./span>
=
“/span>
项目中的项目span class="token punctuation" c-id="146.835.11.3">
“/span>
:钥匙/span>
=
“/span>
item.src.span class="token punctuation" c-id="146.846.11.3">
“/span>
>
离子缩略图/span>
投币口/span>
=
“/span>
开始span class="token punctuation" c-id="146.865.11.3">
“/span>
>
离子 - img./span>
:SRC./span>
=
“/span>
item.src.span class="token punctuation" c-id="146.884.11.3">
“/span>
>
/span>
离子 - img./span>
>
/span>
离子缩略图/span>
>
离子标签/span>
>
{{item.text}}span class="token tag" c-id="146.912.9.15">
/span>
离子标签/span>
>
/span>
离子项目/span>
>
/span>
离子清单/span>
>
/span>
模板/span>
>
脚本/span>
>
进口/span>
{
Ionimg.span class="token punctuation" c-id="146.960.11.5">
那/span>
IonItem.span class="token punctuation" c-id="146.963.11.7">
那/span>
Ionlabel.span class="token punctuation" c-id="146.966.11.9">
那/span>
离子列表span class="token punctuation" c-id="146.969.11.11">
那/span>
ionthumbnail.span class="token punctuation" c-id="146.972.11.13">
}
从/span>
'@betway东盟体育app ionic / vue'/span>
;/span>
进口/span>
{
绝缘组分span class="token punctuation" c-id="146.989.11.24">
}
从/span>
'vue'/span>
;/span>
出口/span>
默认/span>
绝缘组分/span>
(/span>
{
成分span class="token operator" c-id="146.1013.11.39">
:/span>
{
Ionimg.span class="token punctuation" c-id="146.1019.11.43">
那/span>
IonItem.span class="token punctuation" c-id="146.1022.11.45">
那/span>
Ionlabel.span class="token punctuation" c-id="146.1025.11.47">
那/span>
离子列表span class="token punctuation" c-id="146.1028.11.49">
那/span>
ionthumbnail.span class="token punctuation" c-id="146.1031.11.51">
}
那/span>
设置/span>
(/span>
的)/span>
{
Const./span>
项目span class="token operator" c-id="146.1049.11.62">
=
[
{
'文本'/span>
:/span>
'第1件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第2件'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
那/span>
{
'文本'/span>
:/span>
'第3'/span>
那/span>
'src'/span>
:/span>
'/path/to/external/file.png'/span>
}
]
;/span>
返回/span>
{
项目span class="token punctuation" c-id="146.1140.11.118">
}
}
}
的)/span>
;/span>
/span>
脚本/span>
>
特性/a>
alt./H3> |
|
---|---|
描述/th> |
此属性定义描述图像的替代文本。用户将看到显示此文本,如果图像URL是错误的,则图像不在支持的格式之一,或者如果尚未下载图像。 |
属性/th> |
alt./code> |
类型/th> |
字符串|不明确的 |
SRC./H3> |
|
描述/th> |
图像URL。此属性是强制性的code> |
属性/th> |
SRC./code> |
类型/th> |
字符串|不明确的 |
事件/a>
姓名/th> | 描述/th> |
---|---|
IonError./code> |
当IMG无法加载时发出/td> |
Ionimgdidload./code> |
当图像加载时发出/td> |
IonimgWillload./code> |
设置了IMG SRC时发出/td> |
CSS阴影部件/a>
姓名/th> | 描述/th> |
---|---|
图片/code> |
内部`img`元素。/td> |