uni-app 如何使用 image 组件显示图片？

推荐答案

在 uni-app 中使用 image 组件显示图片的基本语法如下：

<image src="/static/logo.png" mode="aspectFit"></image>

• src 属性用于指定图片的路径，可以是本地路径或网络路径。
• mode 属性用于指定图片的显示模式，常见的模式有 aspectFit、aspectFill、widthFix 等。

本题详细解读

1. src 属性

src 属性用于指定图片的路径。路径可以是以下几种形式：

• 本地路径：图片存放在项目的 static 目录下，路径以 /static/ 开头。例如：/static/logo.png。
• 网络路径：直接使用图片的 URL。例如：https://example.com/image.png。

2. mode 属性

mode 属性用于控制图片的显示模式，常见的模式有：

• aspectFit：保持图片的宽高比，确保图片完整显示在容器内，可能会有留白。
• aspectFill：保持图片的宽高比，确保图片填满容器，可能会裁剪图片。
• widthFix：图片的宽度不变，高度自动调整，保持图片的宽高比。
• scaleToFill：不保持宽高比，图片会被拉伸或压缩以填满容器。

3. 示例代码

以下是一个完整的示例代码，展示如何使用 image 组件显示本地图片和网络图片：

-- -------------------- ---- -------
----------
  ------
    ---- ------ ---
    ------ ---------------------- -------------------------

    ---- ------ ---
    ------ ----------------------------------- --------------------------
  -------
-----------

4. 注意事项

• 如果图片路径错误或图片加载失败，image 组件会显示一个默认的占位图。
• 在使用网络图片时，确保图片的 URL 是有效的，并且服务器允许跨域访问。
• 为了提高性能，建议对图片进行适当的压缩和优化，尤其是在移动端应用中。