uni-app vue3 编译微信小程序时多个分包文件存在同一张图片会导致图片编译异常

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

示例代码：

见上方附件

操作步骤：

新建一个uniapp项目
创建两个分包文件，比如A分包和B分包
在两个分包下，放入两张一样的图片，并修改图片的名字，比如icon-A ，icon-B。注意这里的图片一定要是一样的，只是名字不一样
在A 和 B分包分别引入两个图片文件
编辑到微信小程序，真机运行后，进入B分包，发现图片不显示

预期结果：

B分包显示引入的B图片，A分包显示的引入的A图片

实际结果：

先进入B分包，发现不显示图片。进入A分包，在进入B分包，才会显示图片

bug描述：

多个分包情况下，进入某个分包页面会出现图片找不到的异常情况。

htzhanglong 1楼•7 天前

场景描述：因为项目中主包内容过大，不想将图片放入主包，便在两个分包中，分别加入的两张一样的图片

vueper 2楼•7 天前

在使用uni-app结合Vue 3开发微信小程序时，确实可能会遇到因多个分包文件夹中存在同名图片资源而导致编译异常的问题。这通常是由于微信小程序对资源文件的打包限制所导致。为了解决这个问题，可以采取一些策略来避免资源冲突，比如使用命名空间或者动态生成资源路径。以下是一个示例代码案例，展示如何通过修改图片命名和引用方式来规避这一问题。

示例解决方案：命名空间法

假设你有两个分包pageA和pageB，它们各自需要使用一张名为background.png的图片。

重命名图片：为每个分包的图片添加前缀，以区分它们。例如，将pageA中的background.png重命名为pageA_background.png，将pageB中的background.png重命名为pageB_background.png。
更新图片引用：在相应的Vue组件中更新图片的引用路径。

分包pageA中的组件代码示例：

<template>
  <view class="container">
    <image :src="require('@/static/pageA/pageA_background.png')" class="background"></image>
  </view>
</template>

<script setup>
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.background {
  width: 100%;
  height: 100%;
}
</style>

分包pageB中的组件代码示例：

<template>
  <view class="container">
    <image :src="require('@/static/pageB/pageB_background.png')" class="background"></image>
  </view>
</template>

<script setup>
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.background {
  width: 100%;
  height: 100%;
}
</style>

注意事项：

确保在项目的静态资源目录中正确放置了重命名后的图片。
使用require动态引入图片时，路径要相对正确，且符合uni-app的打包规则。
如果项目中有大量图片资源，可以考虑使用脚本自动化重命名和更新引用的过程，以提高效率。

通过上述方法，可以有效避免因多个分包中存在同名图片而导致的编译异常问题。这种方法虽然增加了资源管理的复杂性，但确保了资源的唯一性和编译的稳定性。