VueJS绑定Firebase Storage图片地址报Cannot find module如何解决

报错核心原因 #

代码存在两个关键问题直接触发报错：

• 错误使用require()方法：require()是Webpack/Vite等构建工具用来加载本地项目内静态资源的API，会在代码构建阶段查找本地对应路径的文件。你传入的是Firebase返回的公网HTTP地址，构建工具无法在本地项目中找到这个远程链接对应的模块，直接触发找不到模块的报错。
• 模板直接绑定异步方法返回值：getDownloadURL是异步接口，在模板src属性上直接调用异步方法，拿到的会是Promise对象，而非最终的URL字符串，即使去掉require也无法正常加载图片。

修复步骤 #

• 定义响应式变量单独存储图片地址，不要在模板中直接调用异步方法
• 在组件生命周期（如mounted）中触发图片地址获取逻辑，拿到结果后赋值给响应式变量
• 直接使用Firebase返回的公网URL即可，不需要用require()包裹远程地址

修正后代码 #

模板部分 #

<div>
  <p>Image gallery:</p>
  <!-- 地址加载完成前不渲染img标签，避免空src报错 -->
  <img v-if="imgUrl" :src="imgUrl" alt="站点图片">
</div>

脚本部分 #

export default {
  data() {
    return {
      // 存储图片地址的响应式变量
      imgUrl: ""
    }
  },
  async mounted() {
    // 组件挂载完成后拉取图片地址
    const storage = getStorage();
    const stationsRef = ref(storage, 'stations/cal.jpg');
    this.imgUrl = await getDownloadURL(stationsRef);
    console.log("获取到的图片公网地址：", this.imgUrl);
  }
}

如果是多张图片的画廊场景，只需要把imgUrl换成数组类型，遍历渲染即可，逻辑一致。

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