Taro v4框架开发微信小程序（加载图片）

图片加载优化示例

在前端开发中，对图片资源的优化可以显著提升页面的加载速度和性能。在本示例我们将展示如何在Taro项目中导入和使用图片资源，并介绍一个出色的图片压缩工具。

压缩图片资源

首先，我们准备了两张示例图片。图片分别命名为avatar.jpg和hot-icon.png，放置于项目的src/static/images目录下。这两张图片已经通过在线压缩工具 tinypng.com/ 进行了压缩。其中，avatar.jpg的文件大小为1.44kb，hot-icon.png的文件大小为628b。

压缩图片是提升网页加载速度的有效方案之一。使用Tinypng在线压缩网站，可以在保持图片质量的同时减小文件体积。

导入和使用图片

在Taro中，可以使用ES6的import语法来导入图片资源。以下是导入avatar.jpg图片并在Image组件中使用的代码示例：

javascript 复制代码

// index.tsx
import {View, Text, Image} from '@tarojs/components'
import Avatar from '@/static/images/avatar.jpg'

import './index.scss'

export default function Index() {


  return (
    <View className='index'>
      <View>
        <Image mode='aspectFit' src={Avatar} />
        <View>
          <Text>辰火流光</Text>
        </View>
      </View>
    </View>
  )
}

在上述代码中，我们通过相对路径导入了图片并将其传递给Image组件的src属性。mode='aspectFit'确保图片按比例适应容器，而不会变形。

微信小程序开发者工具中的显示效果

在微信小程序开发者工具中预览时，你会看到图片被正确加载并展示在页面上。

背景图片的CSS导入方法

CSS中的背景图导入是前端开发中的常见技巧。在上一例中，我们已经通过SCSS文件引入了一个背景图片。现在，我们继续在Taro项目里使用SCSS为一个元素设置背景图片。

使用SCSS设置背景图片

在index.scss文件中，我们使用background将图片设置为元素的背景图。注意使用url时，路径前加上~@表示从项目的src目录开始查找。

scss 复制代码

// index.scss文件
.hot-icon {
  background: url("~@/static/images/hot-icon.png") no-repeat;
  width: 100px;
  height: 100px;
}

在上面的代码中，.hot-icon设置了背景图，并指定了no-repeat属性以避免图片重复。同时，也为这个元素设置了宽高，确保图片可以正确显示。

修改index.tsx以引入背景图片

然后，在index.tsx文件中，我们在视图结构中引入了hot-icon的类，如下所示：

javascript 复制代码

import { View, Text, Image } from '@tarojs/components';
import Avatar from '@/static/images/avatar.jpg';
import './index.scss';

export default function Index() {
  return (
    <View className='index'>
      <Image mode='aspectFit' src={Avatar} />
      <View className='hot-icon' /> {/* 新增的具有背景图的元素 */}
      <View>
        <Text>辰火流光</Text>
      </View>
    </View>
  );
}

预览效果

在微信小程序开发者工具中预览时，可以看到背景图片自动转成base64格式并成功加载。

修改PostCSS配置以转换较大图片为Base64

此时，我们将背景图换为 avatar.jpg

css 复制代码

// index.scss文件
.hot-icon{
  background: url("~@/static/images/avatar.jpg") no-repeat;
  background-size: 100%;
  width: 300px;
  height: 300px;
}

微信开发者工具报错，提示： $渲染层网络层错误$ pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。

我们发现，图片并没有被转为base64

这是因为Taro配置的PostCSS url插件默认只对大小在1KB以内的图片进行Base64转换。这是为了平衡性能与请求次数，太大的Base64编码可能会增加CSS文件大小，进而对加载速度产生影响。

扩展url插件的大小限制

如果需要转换更大的图片，我们可以通过修改PostCSS的配置来调整大小限制。在项目的config/index.ts配置文件中，我们加入以下代码来改变限制：

typescript 复制代码

url: {
  enable: true,
  config: {
    limit: 20480 // 将大小限制设置为2KB
  }
},

这样，图片直到2KB都会被转换成Base64编码。

重新编译项目检查效果

修改配置后，我们需要重新编译项目来使新配置生效。在终端运行：

复制代码

pnpm dev:weapp

重新编译后，在微信开发者工具中可以看到avatar.jpg现在已成功转换为Base64编码。

注意使用网络图片

尽管对小图使用Base64可以减少请求次数，但对于较大的图片，推荐使用网络图片的URL。因为较大的Base64编码会显著增加CSS文件的大小，这有可能抵消了减少HTTP请求所带来的性能益处。在生产环境下，对性能和加载时间敏感时，这一点尤为重要。