uniapp的image和icon的区别

UniApp 是一个基于 Vue.js 的跨平台应用框架，可以同时开发运行在多个平台的应用程序。在 UniApp 中，Image 和 Icon 是两种不同的组件，它们用于展示图像和图标。

1. Image（图片）组件：Image 组件用于展示图片，可以加载本地图片或者网络图片。你可以通过指定 src 属性来设置图片的路径，也可以通过 mode 属性来控制图片的展示方式，例如填充、缩放、裁剪等。Image 组件可以根据设备的像素密度进行适配，并提供了一些属性和事件来处理加载失败、加载完成等情况。

2. Icon（图标）组件：Icon 组件用于展示矢量图标，通常使用字体图标或者 SVG 图标。UniApp 中的 Icon 组件可以使用内置的图标库，也可以通过自定义 iconfont 字体文件或者 SVG 图片来展示图标。你可以通过指定 type 属性来选择要展示的图标，也可以通过 size 属性来调整图标的大小和颜色。

总结来说，Image 组件主要用于展示图片，而 Icon 组件则用于展示矢量图标。它们在功能和用途上有一些区别，根据需求选择合适的组件来展示内容。

相关问题

uniapp 使用icon

在UniApp中使用图标有几种方式：

1. 使用字体图标库：UniApp支持使用字体图标库，如Font Awesome、Iconfont等。你可以在官方文档中找到相应的使用方法，一般是引入字体文件和对应的CSS样式，然后在页面中使用相应的类名来显示图标。

2. 使用本地图片：如果你有自定义的图标图片，可以将图片文件放在项目中的合适位置，然后在页面中使用`<image>`标签来显示图标。你可以将图片放在项目的`static`目录下，并在页面中使用相对路径引用图片文件。

3. 使用第三方组件库：UniApp支持使用第三方的UI组件库，如Vant、uView等。这些组件库通常提供了丰富的图标库，你只需要按照组件库的文档引入相应的组件和样式，然后在页面中使用相应的组件来显示图标。

以上是UniApp中使用图标的几种常见方式，你可以根据自己的需求选择合适的方法来实现。

uniapp切换icon

在uniapp中切换icon可以通过动态设置manifest.json文件中的icons字段来实现。具体步骤如下：

1. 在项目根目录下找到manifest.json文件，如果没有则需要手动创建。
2. 在icons字段中添加需要切换的icon路径和名称，例如：

"icons": [
  {
    "src": "static/icon1.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "static/icon2.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]

3. 在需要切换icon的地方，通过uni.setTabBarBadge或uni.setNavigationBarTitle方法动态修改manifest.json文件中的icons字段，例如：

uni.setTabBarBadge({
  index: 0,
  text: '1',
  success: function () {
    uni.setNavigationBarTitle({
      title: 'icon1'
    });
    uni.setStorageSync('icon', 'icon1');
    uni.reLaunch({
      url: '/pages/index/index'
    });
  }
});

4. 在App.vue文件中监听uni.onShow事件，在事件回调函数中获取uni.getStorageSync('icon')的值，并将其赋值给manifest.json文件中的icons字段，例如：

onShow() {
  let icon = uni.getStorageSync('icon');
  if (icon) {
    let manifest = require('@/manifest.json');
    manifest.icons.forEach(item => {
      if (item.src.indexOf(icon) !== -1) {
        uni.setNavigationBarTitle({
          title: icon
        });
        item.active = true;
      } else {
        item.active = false;
      }
    });
    uni.setStorageSync('icon', '');
    uni.setTabBarBadge({
      index: 0,
      text: '1'
    });
  }
}