国内大的网站建设公司深圳网站设计公司
目标： 统一在配置文件中管理图片，用变量存储，换图标时只需修改链接即可，无需更改业务代码，且方便查找。
tips: 不建议在 asset 中存储大量图片，原因是官方要求小程序内存要限制在2M以内，图片放多了占资源，会扩大包体积。若仅放几个代表性小图标则影响不大。
1. 创建 config/img 文件，放置图片链接，方便统一管理
管理图片的cdn链接(或其他链接，只要能加载出图片即可)
// config/image.js 统一管理图片链接
const IMG_BASE_URL = 'https://cdn.example.com/'; // 云存储基础 URLexport default {// 静态图片（直接使用完整 URL）IELTSImg: 'https://cdn.example.com/2025/07/07/5c238a94de137ee6bcabefbe1e1fd37a.png',defaultLogo:`https://cdn.example.com/2025/07/07/2f32b9151953f0e8caee46b57ac1b3da.png`, // 默认兜底logo// 用IMG_BASE_URL 拼接logos:{logo: `${IMG_BASE_URL}logo.png`,defaultAvatar: `${IMG_BASE_URL}default-avatar.png`,// 动态图片（封装生成逻辑）userAvatar: (userId, size = '100x100') => {return `${IMG_BASE_URL}avatars/${userId}_${size}.jpg?timestamp=${Date.now()}`;},},// 小图标icons: {},
};
2. 在 app.js 中 定义全局变量。
这里全局变量用的 globalData
// app.js
import imgConfig from './config/img.js'
App({onLaunch: function(options) {this.autoUpdate();},globalData: {userInfo: null,imgs: imgConfig, // 图片配置}
})
3. 在页面中引用
方式 1：直接在页面的js文件下引入。需要在每一个要引入的页面加如下代码：
const app = getApp();
const images = app.globalData.imgs;
// pages/home/index.js
// 这两句是核心
const app = getApp();
const images = app.globalData.imgs;
Page({data: {logo: imgs.logo,userAvatar: imgs.userAvatar('user123'),},
});
方式 2：在 WXML 中直接调用（需通过 JS 传递）
如果不想在 JS 中定义 data，可以封装一个工具函数：
// utils/image.js
const getAppImages = () => {const app = getApp();return app.globalData.images;
};export { getAppImages };
这个工具函数可以全局引用。
页面 js 中，引入刚才定义好的工具方法：
// pages/home/index.js
import { getAppImages } from '../../utils/image';
Page({onLoad() {this.images = getAppImages();},
});
页面 wxml 中，使用images变量：
<!-- pages/home/index.wxml -->
<image src="{{images.logo}}" mode="aspectFit" />