鸿蒙OS 添加图片区域

2020-09-18 13:41 更新

实现图片区域通常用 image 组件来实现,使用的方法和 text 组件类似。图片资源放在 common 目录下,图片的路径要与图片实际所在的目录一致。具体示例如下:

  1. <!-- xxx.hml -->
  2. <!-- 插入图片 -->
  3. <div class="right-container">
  4. <image class="img" src="{{middleImage}}"></image>
  5. </div>

  1. /* xxx.css */
  2. .right-container {
  3. width: 432px;
  4. justify-content: center;
  5. }
  6. .img {
  7. margin-top: 10px;
  8. object-fit: contain;
  9. height: 450px;
  10. }

  1. // xxx.js
  2. export default {
  3. data: {
  4. middleImage: '/common/ice.png',
  5. },
  6. }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号