目標： 統一在配置文件中管理圖片，用變量存儲，換圖標時只需修改鏈接即可，無需更改業務代碼，且方便查找。

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" />