new URL加载图片404 - Githubissues

damnwenxi commented 1 year ago

描述bug

通过new URL('xxxx.png', import.meta.url).href 的方式在子应用中加载的图片，在主应用中无法正常加载。

如何复现

子应用端口 5179 主应用端口 5173

子应用中加载： new URL('@/assets/images/hmi/bg-light.png', import.meta.url).href 子应用单独运行, 正常渲染：子应用在无界微前端环境中运行，404：

可以看到微前端环境中图片的绝对地址已经被替换成主应用的host了

猜想：new URL() 是在主应用环境下执行的。但是主应用没有设置alias，这个路径怎么解析的？

错误截图 如果有可以将截图带上

最小复现仓库或者地址 重要！！！，请尽量给出复现仓库，这样能极大加快bug解决速度

zzylj commented 1 year ago

https://github.com/Tencent/wujie/issues/413

可以试一下以上两种解决方法，检验一下可行性以及是否会影响其他功能。

AFine970 commented 1 year ago

wujie的官方demo中vite示例，使用vite2+vue3，将demo跑起来之后，子应用使用new URL动态加载图片，图片在主应用是正常显示的。（说明wujie的代码是没问题的）

<template>
    <img :src="imgUrl">
</template>

<script lang="ts">
/**
 * @description: 动态加载svg图片
 */

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class Icon extends Vue {
    @Prop({ type: String, required: true }) iconName!: string;

    get imgUrl() {
        return this.getImageUrl(this.iconName);
    }

    getImageUrl(name: string) {
        return new URL(`../assets/svg/${name}.svg`, import.meta.url).href;
    }
}
</script>

但我的项目是vite3+vue2，子应用使用new URL动态加载图片，图片在主应用是404

于是将官方的demo升级到vite3，子应用使用new URL动态加载图片，图片在主应用果然404，猜测可能是vite3的问题