uniapp image app端不显示

踩坑历程

事情是这个样子的~

uniapp 中的 image 组件中，mode 属性的默认值是 scaleToFill ，即不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素，这样的话，图片会被拉伸，很难看，找了下，widthFix 值更符合我的要求。
同时，我的所有图片都是保存至 /static 目录下，且都是 png 格式的，既然做了组件，肯定就一起做了。

组件重写

所以有了以下代码：
/components/ml/image.vue

<template>
  <image :src="`/static/${src}.png`" :mode="mode" />
</template>
<script>
export default {
  props: {
    src: { type: String, required: true },
    mode: { type: String, default: "widthFix" },
  },
};
</script>
<style lang="scss" scoped>
image {
  width: 100%;
  will-change: transform;
}
</style>

组件全局引用

想要使用组件，就得引入嘛，我希望直接全局引入，在 main.js 中（只有 main.js 部分代码）：

import Vue from "vue";
import image from "@/components/ml/image";
Vue.component("ml-image", image);

然后，就可以在页面中使用 ml-image 组件了。

测试

h5 端

测试正常

app 端

图片不能正常加载

问题排查

排查问题，排除加载错误、路径错误等问题后，就只剩全局引用了，尝试不使用全局引用组件，直接在需要使用的页面引入组件，成功！

解决办法

不要全局引用组件，需要使用此组件的页面，在页面中引入再使用即可。

疑问待解决

为啥全局引用在 web 端正常，在 app 端不能正常加载？是 uniapp 内部渲染问题？希望有思路的小伙伴儿留言讨论。