Quasar中图片浏览器正常显示，模拟器/真机不显示问题求助

问题根源 #

浏览器开发环境中，src/assets/xxx.jpeg这类相对路径能被Dev Server直接解析，但打包到移动端时，资源会被哈希重命名且路径结构可能发生变化，直接返回字符串路径无法正确映射到打包后的资源位置，导致真机/模拟器无法加载图片。

解决方案 #

方案1：用new URL()构建正确资源路径 #

修改getImage函数，利用Vue3/Vite的import.meta.url生成绝对路径，确保打包后路径有效：

<template>       
  <div v-for="contact in contactDetails.contacts" :key="contact.id">
    <div><img :src="getImage(contact.id)" class="flex-container" alt="" style="height: 300px"></div>
  </div>
</template>

<script setup>
const getImage = (imageData) => {
  // 根据组件文件相对assets目录的位置调整路径前缀，比如组件在src/components下用../assets
  return new URL(`../assets/${imageData}.jpeg`, import.meta.url).href
}
</script>

方案2：批量导入图片资源 #

如果图片数量固定，可提前批量导入所有图片，规避动态路径解析问题：

<template>       
  <div v-for="contact in contactDetails.contacts" :key="contact.id">
    <div><img :src="imageMap[contact.id]" class="flex-container" alt="" style="height: 300px"></div>
  </div>
</template>

<script setup>
// 方式1：手动导入
const imageMap = {
  1: import('../assets/1.jpeg').then(m => m.default),
  2: import('../assets/2.jpeg').then(m => m.default),
  3: import('../assets/3.jpeg').then(m => m.default)
}

// 方式2：Vite自动批量导入（更高效）
const images = import.meta.glob('../assets/*.jpeg', { eager: true })
const imageMap = {}
for (const path in images) {
  // 提取文件名中的数字作为id匹配
  const id = path.match(/(\d+)\.jpeg$/)[1]
  imageMap[id] = images[path].default
}
</script>

额外检查项 #

• 确认图片文件名和后缀完全匹配：移动端系统（尤其是Android）对文件名大小写敏感，浏览器开发环境可能不区分，比如1.JPEG和1.jpeg会被视为不同文件。
• 检查打包工具配置：
  • Vite默认会正确处理src/assets下的资源，若修改过publicDir配置，需对应调整路径。
  • Vue CLI需确保图片放在src/assets目录下，避免放在public目录导致路径解析异常。

内容的提问来源于stack exchange，提问作者jkc