<image>组件 #44

Open
Erwin11 opened this Issue Jul 12, 2016 · 22 comments

Projects

None yet
@Erwin11
Erwin11 commented Jul 12, 2016 edited

本文档已迁移至 https://weex-project.io/cn/references/components/image.html ,此处不再维护,谢谢。

< image > 组件

概述

image 标签用于渲染一个特定的图片,并且它不能包含任何子组件。可以用img 作简写。

注意: widthheight需要指定,否则会不工作。

简写:

子组件

这个组件不支持子组件。

属性

  • src:<字符串>属性 图片原始链接
  • resize: <字符串> 组件的拉伸属性。默认值是stretch,如果此属性不指定,该值可能是cover,contain , 值行为和W3C标准一致。

其他属性请查阅基本属性

样式

  • width : <长度>属性 组件的宽度,需指定。
  • height: <长度>属性 组件的高度,需指定。

基本样式: 查看基本样式

  • 支持 flexbox 相关样式
  • 支持 box 模型相关样式
  • 支持 position 相关属性
  • 支持 opacity,background-color 等。

事件

基本事件:查阅基本事件

例子

<div>
  <image src="..." ></image>
  <text>...</text>
</div>

简写:

<div>
  <img src="..." ></img>
  <text>...</text>
</div>
@emptywalker

能给一个根据屏幕宽度去设置图片宽度的属性吗? 如果想把它的宽度设置成屏幕的一半或三分之一等等呢。

这个图片resize属性,我将原图是个正方形的宽度不是设置成正方形后, 不管用哪一个属性 都是拉伸状态, 不能正常显示

求解

@wang111588

@emptywalker 有的,vw,vh,意思是把屏幕宽或高分成100份,一份的宽或高。

@wang111588

如果支持子组件就好了,可以很简单就实现背景图的需求。

@Jam1zhu
Jam1zhu commented Oct 13, 2016

resize三个属性在andorid机上并没有任何变化。。。每个小图标都要单独调试样式。好坑。

@liuchuhui
<style> .header{ width: 100%; height: 200px; background-color: rgb(209,16,35); text-align: center; } .avatar{ width: 60px; height: 60px; border-radius: 30px; margin: 0px auto; } </style> <script> module.exports = { data:{ avatarUrl: '../../images/tu4482_22.jpg' }, methods:{ } } </script>

image如何居中,查看解析后的html和css, margin:0px auto;无用

@wzj583585700

怎么把文字添加到图片上面

@bluesky0109

不能内嵌子组件,对应背景图这种 常见场景 如何应对??

@malaimoo
malaimoo commented Nov 9, 2016

如何添加本地图片?

@longjiayu95

同问怎么添加本地图片?

@longjiayu95

@wang111588 请问这个vh跟vw具体是怎么用的?能不能给个例子

@malaimoo

@longjiayu95 不支持本地图片,我已经废弃这个项目了。对于TB这种纯展示的可能比较合适,稍微有点交互的就不行了。

@gangoogle

根据这个可以设置图片占屏幕的宽度为1/3吧,我做安卓开发都是这样弄的

@gangoogle

<img style={flex:1;}/><div style={flex:2}/>

@DoranYun

@bluesky0109 背景图可以通过 position 来解决

<template>
  <div>
    <img style="width:750; height:750;" src="https://img.alicdn.com/tps/TB1RD.aOpXXXXbzXXXXXXXXXXXX-560-560.png"></img>
    <div class="title">
      <text style="font-size:50; color: #ff0000">你好,image</text>
    </div>
  </div>
</template>
<style>
  .title{
    position:absolute;
    top:50;
    left:10;
  }
</style>
@RrtoyewxXu

本地图片不支持吗?通过file://或者assert://也不行吗

@RrtoyewxXu

按理内置js bundle文件应该加载本地的图片,内置的js bundle文件不都是放在assert文件里面,然后通过/或者xx/这种找不到文件吗?

@DoranYun
DoranYun commented Dec 9, 2016

@emptywalker Weex 是以 750 宽度自适应的,图片的宽度也是根据这个比例自适应。将图片宽度设为 375,在任何大小的屏幕上,图片均为一半。

@DoranYun
DoranYun commented Dec 9, 2016

@RrtoyewxXu @longjiayu95 @malaimoo Weex 目前没有提供本地图片功能,不过可以自己实现图片库扩展

@DoranYun
DoranYun commented Dec 9, 2016

@Jam1zhu
Hi,resize 属性都支持的。
可查看最新版的文档示例 http://alibaba.github.io/weex/cn/doc/components/image.html
示例: http://dotwe.org/ede2959ea5225642cf6202f9e3b43d3a

@DoranYun
DoranYun commented Dec 9, 2016

@wzj583585700
背景图可通过 position 来模拟。
查看最新版的文档示例 http://alibaba.github.io/weex/cn/doc/components/image.html
示例: http://dotwe.org/9cfb27a6cb3c30f3316a2a15257fca5d

@DoranYun
DoranYun commented Dec 9, 2016

@longjiayu95 目前不支持 vh 和 vw 单位。

@DoranYun

本文档已迁移至 https://weex-project.io/cn/references/components/image.html ,此处不再维护,谢谢。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment