踩坑历程
事情是这个样子的~
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 内部渲染问题？希望有思路的小伙伴儿留言讨论。
