Img 图片组件

如果项目中使用的是 0.x 版本的基础组件(@icedesign/base, @ali/ice, @alife/next),请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/img@1.0.2 -S

ICE 图片组件,用来增强图片显示效果。

安装和升级

  1. npm i @icedesign/img -S

参数(props)

参数名说明必填类型默认值可选值备注
type图片显示模式falsestringcovercover、contain
src图片 urltruestring
shape形状展现falsestringsharpcircle、sharp、rounded
title图片的 title,hover 上去会显示出来falsestring''
alt图片的 alt 通常用于屏幕阅读器(盲人)识别falsestring''
className图片的 classNamefalsestring''
style图片的 inline stylefalseobject{}
width图片显示宽度falsenumber计算图片必需,不传则表现形式等同于普通 img 标签。
height图片显示高度falsenumber计算图片必需,不传则表现形式等同于普通 img 标签。
errorImgSrc图片加载失败的兜底图片falsestring如果图片加载失败,那么将用这张图来代替
onError图片加载失败的回调方法falsefunction如果图片加载失败,那么将执行这个 callback 让你添加一些容错逻辑
enableAliCDNSuffix是否启用 Ali CDN 自动裁切参数falsefalse如果在 cover 模式下,图片高度太高可能会拉伸的比较模糊

图片底部存在 3px 空隙的解决方法

如果你将当前组件用来展示图片放在其他组件内,或者使用当前组件时有外边线,细致的你会发现底部可能存在 3px 的间隙:

image

这是由于图片的 inline-block 渲染模式导致的,你无需理解背后的原理,如果你想去掉这个间隙,可以直接在当前组件加上一行 CSS 即可:

  1. <Img
  2. style={{
  3. verticalAlign: 'middle',
  4. }}
  5. src="xxx"
  6. />

图片尺寸性能优化

图片原图可能会非常大,例如 https://img.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png 会达到 200kb 但实际放在页面上,希望它只显示 200x100 这样的尺寸,此时性能就会很差。

如果你的图片使用 img.alicdn.com 这个 CDN 地址,那么可以传入 props enableAliCDNSuffix={true} 将自动开启 Ali CDN 裁切参数,会将图片 url 变成 https://img.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png_400x200q90.jpg 进行压缩优化,压缩之后图片只有 116kb,加载性能会提升非常多,建议默认开启使用。

如果在 cover 模式下,如果图片尺寸跟配置的显示尺寸差距太大,可能会导致拉伸变模糊,如果绝大部分图片都是此类尺寸,可以设置 false 去掉这个功能。

代码示例

简单的用法

本 Demo 演示最基础的用法。

Img 图片组件 - 图2

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {Button} from '@alifd/next';
  4. import Img from '@icedesign/img';
  5. class App extends Component {
  6. state = {
  7. url1: 'https://img.alicdn.com/tfs/TB1vyxuwHrpK1RjSZTEXXcWAVXa-1350-900.jpg',
  8. url2: 'https://img.alicdn.com/tfs/TB1A8NCLNYaK1RjSZFnXXa80pXa-2580-1032.jpg'
  9. };
  10. changeImgs = () => {
  11. this.setState({
  12. url1: getImgs(this.state.url1),
  13. url2: getImgs(this.state.url1)
  14. });
  15. };
  16. render() {
  17. return (
  18. <div>
  19. <h1>cover 模式强调填充铺平</h1>
  20. <Img
  21. enableAliCDNSuffix={true}
  22. width={400}
  23. height={200}
  24. src={this.state.url1}
  25. type="cover"
  26. style={{border: '1px solid #ccc', margin: '10px'}}
  27. />
  28. <Img
  29. enableAliCDNSuffix={false}
  30. width={400}
  31. height={200}
  32. src={this.state.url2}
  33. type="cover"
  34. style={{border: '1px solid #ccc', margin: '10px'}}
  35. />
  36. <h1>contain 模式强调信息全部展示</h1>
  37. <Img
  38. enableAliCDNSuffix={true}
  39. width={400}
  40. height={200}
  41. src={this.state.url1}
  42. type="contain"
  43. style={{border: '1px solid #ccc', margin: '10px'}}
  44. />
  45. <Img
  46. enableAliCDNSuffix={true}
  47. width={400}
  48. height={200}
  49. src={this.state.url2}
  50. type="contain"
  51. style={{border: '1px solid #ccc', margin: '10px'}}
  52. />
  53. <div>
  54. <Button type="primary" style={{marginTop: 20}} onClick={this.changeImgs}>切换新图片会重新计算尺寸</Button>
  55. </div>
  56. </div>
  57. );
  58. }
  59. }
  60. function getImgs(url) {
  61. if (url === 'https://img.alicdn.com/imgextra/i3/2779138589/TB2_gtLlrBmpuFjSZFuXXaG_XXa_!!2779138589.jpg') {
  62. return 'https://img.alicdn.com/tfs/TB1vyxuwHrpK1RjSZTEXXcWAVXa-1350-900.jpg';
  63. }
  64. return 'https://img.alicdn.com/imgextra/i3/2779138589/TB2_gtLlrBmpuFjSZFuXXaG_XXa_!!2779138589.jpg';
  65. }
  66. ReactDOM.render((
  67. <App />
  68. ), mountNode);

用在表格中

本 Demo 演示在表格中使用图片。

Img 图片组件 - 图3

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {Table} from '@alifd/next';
  4. import Img from '@icedesign/img';
  5. class App extends Component {
  6. state = {
  7. }
  8. renderCover = (value, index, record) => {
  9. let type = 'cover';
  10. if (index % 3 === 0) {
  11. type = 'contain';
  12. }
  13. return (
  14. <div>
  15. <Img
  16. enableAliCDNSuffix={true}
  17. width={200}
  18. height={100}
  19. src={record.src}
  20. type={type}
  21. />
  22. 当前图片模式:{type}
  23. </div>
  24. );
  25. };
  26. render() {
  27. return (
  28. <div>
  29. <Table
  30. dataSource={tableData}
  31. >
  32. <Table.Column title="封面图" cell={this.renderCover} />
  33. <Table.Column title="标题" dataIndex="title" />
  34. </Table>
  35. </div>
  36. );
  37. }
  38. }
  39. const tableData = [{
  40. src: 'https://img.alicdn.com/tfs/TB1vyxuwHrpK1RjSZTEXXcWAVXa-1350-900.jpg',
  41. title: '这是一张示例图片这是一张示例图片这是一张示例图片这是一张示例图片',
  42. }, {
  43. src: 'https://img.alicdn.com/tfs/TB1A8NCLNYaK1RjSZFnXXa80pXa-2580-1032.jpg',
  44. title: '示例图片2号示例图片2号示例图片2号示例图片2号'
  45. }, {
  46. src: 'https://img.alicdn.com/tfs/TB1vyxuwHrpK1RjSZTEXXcWAVXa-1350-900.jpg',
  47. title: '这是一张示例图片这是一张示例图片这是一张示例图片这是一张示例图片',
  48. }, {
  49. src: 'https://img.alicdn.com/tfs/TB1A8NCLNYaK1RjSZFnXXa80pXa-2580-1032.jpg',
  50. title: '示例图片2号示例图片2号示例图片2号示例图片2号'
  51. }, {
  52. src: 'https://img.alicdn.com/tfs/TB1vyxuwHrpK1RjSZTEXXcWAVXa-1350-900.jpg',
  53. title: '这是一张示例图片这是一张示例图片这是一张示例图片这是一张示例图片',
  54. }, {
  55. src: 'https://img.alicdn.com/tfs/TB1A8NCLNYaK1RjSZFnXXa80pXa-2580-1032.jpg',
  56. title: '示例图片2号示例图片2号示例图片2号示例图片2号'
  57. }, {
  58. src: 'https://img.alicdn.com/tfs/TB1vyxuwHrpK1RjSZTEXXcWAVXa-1350-900.jpg',
  59. title: '这是一张示例图片这是一张示例图片这是一张示例图片这是一张示例图片',
  60. }, {
  61. src: 'https://img.alicdn.com/tfs/TB1A8NCLNYaK1RjSZFnXXa80pXa-2580-1032.jpg',
  62. title: '示例图片2号示例图片2号示例图片2号示例图片2号'
  63. }];
  64. ReactDOM.render((
  65. <App />
  66. ), mountNode);

图片加载失败

图片加载失败的处理方法。

Img 图片组件 - 图4

查看源码在线预览

  1. import React, {Component} from 'react'
  2. import ReactDOM from 'react-dom';
  3. import Img from '@icedesign/img';
  4. class App extends Component {
  5. state = {
  6. imgSrc: 'https://im---g.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png'
  7. }
  8. handleImgError = () => {
  9. // 你可以额外添加一些容错处理业务逻辑
  10. // console.log('图片报错啦!日志记录下');
  11. this.setState({
  12. imgSrc: 'https://img.alicdn.com/tps/TB11W.WOXXXXXcbaXXXXXXXXXXX-496-310.png'
  13. });
  14. };
  15. render() {
  16. return (
  17. <div>
  18. <h1>图片加载失败可以监听 onError 事件,并改变 State 实现</h1>
  19. <p>用于对图片加载失败做更多业务逻辑处理</p>
  20. <Img
  21. enableAliCDNSuffix={true}
  22. width={400}
  23. height={200}
  24. onError={this.handleImgError}
  25. src={this.state.imgSrc}
  26. type="cover"
  27. style={{border: '1px solid #ccc', margin: '10px'}}
  28. />
  29. <h1>或者通过设置 errorImgSrc props 会自动在出错的时候替换掉</h1>
  30. <Img
  31. enableAliCDNSuffix={true}
  32. width={400}
  33. height={200}
  34. errorImgSrc="https://img.alicdn.com/tps/TB11W.WOXXXXXcbaXXXXXXXXXXX-496-310.png"
  35. src="https://im---g.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png"
  36. type="cover"
  37. style={{border: '1px solid #ccc', margin: '10px'}}
  38. />
  39. </div>
  40. );
  41. }
  42. }
  43. ReactDOM.render((
  44. <App />
  45. ), mountNode);

shape 形状用法

本 Demo 演示 shape 形状的用法。shape 默认为 roundedsharp 无圆角circle 圆形

Img 图片组件 - 图5

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Img from '@icedesign/img';
  4. class App extends Component {
  5. state = {
  6. }
  7. render() {
  8. return (
  9. <div>
  10. <h1>cover 模式下展示</h1>
  11. <Img
  12. enableAliCDNSuffix={true}
  13. width={200}
  14. height={200}
  15. src="//img.alicdn.com/tfs/TB1K..3PpXXXXa4XFXXXXXXXXXX-311-199.png"
  16. type="cover"
  17. shape="circle"
  18. style={{border: '1px solid #ccc', margin: '10px'}}
  19. />
  20. <Img
  21. enableAliCDNSuffix={true}
  22. width={300}
  23. height={200}
  24. src="//img.alicdn.com/tfs/TB1oPNcPFXXXXXQXpXXXXXXXXXX-341-202.png"
  25. type="cover"
  26. shape="sharp"
  27. style={{border: '1px solid #ccc', margin: '10px'}}
  28. />
  29. <Img
  30. enableAliCDNSuffix={true}
  31. width={300}
  32. height={200}
  33. src="//img.alicdn.com/tfs/TB1oPNcPFXXXXXQXpXXXXXXXXXX-341-202.png"
  34. type="cover"
  35. style={{border: '1px solid #ccc', margin: '10px'}}
  36. />
  37. <h1>contain 模式下展示</h1>
  38. <Img
  39. enableAliCDNSuffix={true}
  40. width={300}
  41. height={200}
  42. src="//img.alicdn.com/tfs/TB1A2c4PpXXXXaiXFXXXXXXXXXX-274-201.png"
  43. type="contain"
  44. style={{border: '1px solid #ccc', margin: '10px'}}
  45. />
  46. <Img
  47. enableAliCDNSuffix={true}
  48. width={350}
  49. height={200}
  50. src="//img.alicdn.com/tfs/TB17wwYPpXXXXXHXVXXXXXXXXXX-297-199.png"
  51. type="contain"
  52. shape="sharp"
  53. style={{border: '1px solid #ccc', margin: '10px'}}
  54. />
  55. <Img
  56. enableAliCDNSuffix={true}
  57. width={200}
  58. height={200}
  59. src="//img.alicdn.com/tfs/TB17wwYPpXXXXXHXVXXXXXXXXXX-297-199.png"
  60. type="contain"
  61. shape="circle"
  62. style={{border: '1px solid #ccc', margin: '10px'}}
  63. />
  64. </div>
  65. );
  66. }
  67. }
  68. ReactDOM.render((
  69. <App />
  70. ), mountNode);

相关区块

Img 图片组件 - 图6

暂无相关区块