学会使用image组件 使用image注意的事情
接下来我先说一下image 使用的限制
<img>
,必须使用<image>
接下来我们看一下基本的使用
使用src
设置定义图片链接
代码如下
<template>
<div class="page">
<image src="http://ww2.sinaimg.cn/large/006tKfTcgy1fez04i56w5j31hc0kuwhz.jpg" class="image"></image>
</div>
</template>
39C516C1-74C6-40EF-8454-129EB1061A46.png
布局代码
<style>
.page{
display: flex;
flex-direction: column;
}
.image{
width:750px;
height: 300px;
background-color: gold;
}
</style>
特性
设置拉伸状态(resize)
39C516C1-74C6-40EF-8454-129EB1061A46.png
E9BA11E0-7C81-47FB-9583-B0B29DCCB3B5.png
DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png
接下来我们加载一张gif动画
<image src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff6xfpclgfg302s02s3yl.gif" class="image" resize='contain'></image>
浏览器上支持gif,手机上不支持,对于contain,显示的效果也是不一样的,手机上是居中的,但是网页上是下面这个样子,使用是务必注意!
196F800E-58EA-44C3-9DD4-FF8A27D10BA1.png
一般我们的网络图片没有加载出来之前,image会预先放一个占位图片,当网络图片下载完成后,会替换掉这个图片,接下来看我们如何实现
<image placeholder='http://ww2.sinaimg.cn/large/006tKfTcgy1fez04i56w5j31hc0kuwhz.jpg' src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff6xfpclgfg302s02s3yl.gif" class="image" resize='contain'></image>
思考?
如何支持制作gif动画效果呢?