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请求所带来的性能益处。在生产环境下,对性能和加载时间敏感时,这一点尤为重要。

相关推荐
Amd79411 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You20 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生31 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生33 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端