Taro v4框架开发微信小程序(加载图片)

图片加载优化示例

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

压缩图片资源

首先,我们准备了两张示例图片。图片分别命名为avatar.jpghot-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请求所带来的性能益处。在生产环境下,对性能和加载时间敏感时,这一点尤为重要。

相关推荐
蜗牛快跑2139 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy10 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
小泽呀x2 小时前
微信小程序中使用离线版阿里云矢量图标
微信小程序·小程序
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss