踩坑歷程
事情是這個(gè)樣子的~
uniapp 中的 image 組件中权谁，mode 屬性的默認(rèn)值是 scaleToFill 跨新，即不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素，這樣的話誉察，圖片會(huì)被拉伸，很難看惹谐，找了下持偏，widthFix 值更符合我的要求驼卖。
同時(shí)，我的所有圖片都是保存至 /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);
然后埠戳，就可以在頁(yè)面中使用 ml-image 組件了。
測(cè)試
h5 端
測(cè)試正常
app 端
圖片不能正常加載
問題排查
排查問題蕉扮，排除加載錯(cuò)誤整胃、路徑錯(cuò)誤等問題后，就只剩全局引用了喳钟，嘗試不使用全局引用組件屁使，直接在需要使用的頁(yè)面引入組件，成功奔则！
解決辦法
不要全局引用組件蛮寂，需要使用此組件的頁(yè)面，在頁(yè)面中引入再使用即可易茬。
疑問待解決
為啥全局引用在 web 端正常缤骨，在 app 端不能正常加載阀溶？是 uniapp 內(nèi)部渲染問題斤彼？希望有思路的小伙伴兒留言討論纸型。
