img 标签在微信小程序上显示正常, 在 APP 端无法显示

分类：uni-app

App 微信小程序 uniapp

前情提要

我们这边是uni-app vue2 的旧项目, 原本是运行到微信小程序的, 现在要迁移到 APP 上, 可能需要在微信小程序和 APP 上同时运行, 后期再逐步移除微信小程序支持

我们代码里使用图片标签时不规范, 很多地方都是使用的 img 标签, 这是 html 的原生标签, 理论上不应该直接写在 uni-app 项目中, 而是使用 uni-app 的 imgae 标签, 但是问题是这样的:

在微信小程序里, img 标签正常显示
在 APP 上 (目前只在 Android 上运行测试) img 标签无法显示, 但是改为 image 标签就可以正常显示了
代码里的 img 标签都是用的本地图片, 暂时未涉及网络图片

可能的解决方案

在控制台输出提示: 请勿使用 img 标签, 强烈推荐使用 image 标签代替 img 标签
提供 vue2 的 webpack 插件或 vue3 的 vite 插件, 自动将模板中的 img 标签转换为 image 标签, 这个转换过程是在构建时的, 不会影响现有代码 (插件基于 AST 且只做标签名的替换)
提供正则表达式以在 IDE 中全局替换, 这种方式不推荐, 因为正则表达式很复杂且有局限性, 特殊的边界情况无法处理, 但可以作为最后选择方案
如果确认是兼容性 BUG, 请予以修复, 以使得 img 标签表现同 image 标签完全一致

2025-12-24 09:37 负责人:无分享

4 个回复

Ask小助手

该问题请在专业群（ uni-app 官方技术交流群 1 ）咨询

根据问题描述和知识库内容，img标签在APP端无法显示是预期行为，因为uni-app的设计规范要求使用内置组件而非HTML原生标签。知识库明确指出：

组件映射规则：HTML的<img>应替换为uni-app的<image>组件。文档强调："img 改成 image"。
平台差异原因：虽然uni-app编译器会为H5/小程序平台自动转换部分HTML标签（如微信小程序对img兼容性较好），但APP端严格遵循小程序规范，原生img标签不被支持。

推荐解决方案：

立即替换标签：将所有<img>改为<image>，并确保src路径使用绝对路径（如/static/logo.png）。这是官方最佳实践，避免平台兼容性问题。
自动化工具：可通过vue2-webpack插件实现构建时自动转换（搜索插件市场关键词"vue img to image"），比正则替换更安全可靠。
无需等待修复：此非BUG，而是设计规范。知识库中组件/标签变化文档明确要求使用内置组件。

注意：本地图片路径需以/开头或使用~@/static/格式，避免相对路径问题。迁移时务必测试APP真机效果。

内容为 AI 生成，仅供参考

jgj_app

ifdef 设置不同的环境使用不同的逻辑

2025-12-24 10:16 分享

用户2949803 (作者)

代码里太多img标签了改不动的

2025-12-24 10:30
jgj_app

回复用户2949803: 那也没办法，或者你全部替换

2025-12-24 10:31

用户2949803 (作者)

备用解决方案:

/scripts/webpack-loader/img-to-image-loader.js:

// /scripts/webpack-loader/img-to-image-loader.js  
// npm i -D @vue/compiler-sfc  
// const {parse: parseSFC} = require('@vue/compiler-sfc');  

// 将 vue template 中的 img 标签转为 uni-app image 标签  
// 有多种实现方式:  
// 1. 使用 `@vue/compiler-sfc` AST 实现标签名的替换  
// 2. 简单的正则匹配替换  
// 3. IDE 搜索替换  
module.exports = function (source) {  
  return (  
    source  
      // 左侧标签名  
      // .replace(/<img(\s+[^>]*?)>/gi, '<image$1>')  
      .replace(/<img\b/gi, '<image')  
      // 右侧标签名  
      .replace(/<\/img>/gi, '</image>')  
  );  
};

vue.config.js:

const path = require('path');  

module.exports = {  
  chainWebpack: config => {  
    // 检查 vue 规则是否存在  
    // const hasVueRule = config.module.rules.has('vue');  
    config.module  
      .rule('vue')  
      .test(/\.vue$/)  
      .use('img-to-image-loader')  
      .loader(path.resolve(__dirname, 'scripts/webpack-loaders/img-to-image-loader.js'))  
      .before('vue-loader');  
  }  
};

上述方案已测试通过, 如有需要可直接使用

2025-12-24 14:11 分享

DCloud_UNI_OttoJi

这和改代码没啥区别，你也可以全局搜 <img\s 改成 <image 效果一样

2025-12-24 14:27
用户2949803 (作者)

回复 DCloud_UNI_OttoJi: 改代码改了很难再退回去而且会有很多文件的diff commit 没法看改代码本身是一个比较危险的行为谁改的就要谁负责... 这种在编译阶段搞定的只要验证各个图片都表现正常就可以了出了问题也可以在这里做hack

2025-12-24 15:27

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

这是不受 uniapp 支持的写法，建议迁移到 image 中，你可以和 ai 沟通编写插件，本质上 image 是一个内置的组件，也是一个 vite 工程

2025-12-24 14:25 分享

要回复问题请先登录或注册

img 标签在微信小程序上显示正常, 在 APP 端无法显示

前情提要

可能的解决方案

4 个回复

公告

相关问题

img 标签在微信小程序上显示正常, 在 APP 端无法显示

前情提要

可能的解决方案

与内容相关的链接

4 个回复

公告

相关问题