微信小程序图片展示问题

Question

getImageByStatus(status) {
    console.log("status"+status)
    const statusMap = {
      1: '/image/icon-draft.png',
      2: '/image/icon-pending.png',
      3: '/image/icon-approved.png',
      4: '/image/icon-rejected.png'
    };
    return statusMap[status] || '/image/icon-paper.png';
  },

<image class="paper-icon" src="{{getImageByStatus(1)}}" alt="状态图标" />

这个有什么问题吗？
为什么getImageByStatus不生效的

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

微信小程序图片展示问题

问题描述：在微信小程序中，使用 getImageByStatus(status) 函数获取图片，但是图片展示不正确。

分析：问题可能是由于图片路径或状态码不正确导致的。

解决方案：

1. 检查图片路径是否正确，确保图片路径是正确的绝对路径或相对路径。
2. 检查状态码是否正确，确保状态码对应的图片路径正确。
3. 使用 wx.getImageInfo 方法获取图片信息，检查图片是否加载成功。

示例代码：

getImageByStatus(status) {
  const statusMap = {
    1: '/image1.jpg',
    2: '/image2.jpg',
  };
  const imgPath = statusMap[status];
  if (imgPath) {
    wx.getImageInfo({
      src: imgPath,
      success: (res) => {
        console.log('图片加载成功');
      },
      fail: (err) => {
        console.log('图片加载失败');
      },
    });
  }
}

注意：在微信小程序中，图片路径需要使用 / 开头，例如 /image1.jpg。