图片相关问题

更新时间:2017/08/18 访问次数:1443

图片糊了、显示不出来

使用 quality : original 禁止图片库压缩

<Image source={{uri: 'https://gw.alicdn.com/tps/TB1km2SOpXXXXb6aXXXXXXXXXXX-608-336.png'}}  style={{quality:'original',width:'120rem',height:'120rem'}} />

可以用 base64 图片吗?

可以的,使用如下 base64 图片测试

let base64Pic="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABQCAMAAABrs8qCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI2Mzc2NTc5RjcxMDExRTY4MkQ2QUU4RjExRkRDQ0IyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI2Mzc2NTdBRjcxMDExRTY4MkQ2QUU4RjExRkRDQ0IyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjYzNzY1NzdGNzEwMTFFNjgyRDZBRThGMTFGRENDQjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjYzNzY1NzhGNzEwMTFFNjgyRDZBRThGMTFGRENDQjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YXdEAAAAAMFBMVEWsrKx6enqK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";

gif 图片不动了?

如果是 gif 图是 alicdn 域名,且使用浏览器访问正常,请尝试在图片 url 后面加上 ?getAvatar=avatar

https://ubanner.alicdn.com/7857/4348/7461.png?getAvatar=avatar

怎样获取图片原始尺寸

可以通过 onLoad 事件获取。

onLoadHandler=(e)=>{

        if(!e.size) return;

        let obj ={
           width : e.size.naturalWidth,
           height : e.size.naturalHeight
        }
        console.log(obj);
    }
        
    //... 
    render(){
        return
          <Image src='https://gw.alicdn.com/tps/TB1km2SOpXXXXb6aXXXXXXXXXXX-608-336.png' onLoad={this.onLoadHandler}  style={{quality:'original',width:'120rem',height:'120rem'}} />
    }

FAQ

关于此文档暂时还没有FAQ
返回
顶部