首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue3+Vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案

Vue3+Vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案

作者头像
watermelo37
发布于 2025-04-15 05:06:57
发布于 2025-04-15 05:06:57
218014
代码可运行
举报
文章被收录于专栏:前端专精前端专精
运行总次数:14
代码可运行

Vue3+vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案

代码语言:txt
AI代码解释
复制
    本篇博客旨在填补去年遇到的一个技术坑。去年遇到了这个问题只碰巧找到了一种解决方案,并没有确定错误发生的原因,今年更新项目重部署的时候又遇到了该问题,这次成功找到了根本原因,并且找到了多种解决方案,特此分享给大家,没看过去年博文的也没关系,这篇会详细介绍。
代码语言:txt
AI代码解释
复制
    去年的博文重实践(不求甚解,只有一种解决方案),今年的博文重思维(求根问底,不同思路的解决方案)。欢迎读者按需阅读~
代码语言:txt
AI代码解释
复制
    直接获取解决方案请点击:四、解决方案
代码语言:txt
AI代码解释
复制
    去年博文传送门:

开发和内网部署正常,反向代理后出现404和图片加载失败的解决方案;部署到公网后报错404;部署到公网后图片加载出错;动态渲染获取图片失败_访问代理服务器图片加载不出来

一、情景介绍

1、问题出现的场景
代码语言:txt
AI代码解释
复制
    最近开发一个前端项目,在开发环境和部署到内网的生产环境都没问题。将其反向代理到一个公网域名上,发现其他的内容没有问题,唯独**部分图片资源**无法加载,打开控制台,这部分图片资源请求状态码是404。
代码语言:txt
AI代码解释
复制
    说实话这种情况非常令人迷惑,要是所有图片都无法加载那还好理解,可是我图片统一放在public文件夹,打包后也检查了确实都存在,然后部分图片无法获取,这是为什么呢?
2、无法加载的图片写法
代码语言:txt
AI代码解释
复制
    经过检查,我发现直接写相对路径或者绝对路径都不会丢失图片资源,例如,以下写法都能正常加载图片:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 图片直接放在组件文件旁边的情况(放在assets文件夹同理) -->
 
<div class="fig-container">
        <img class="fig" src="./chaptersImgs/chapter2Fig1.png" alt="" />
        <p class="figTitle" align="center">2 指标体系构建思路图</p>
</div>
 
 
 
<!-- 图片放在public文件夹中的情况 -->
<img
    src="/dataCenterLogo.png"
    style="
        height: 5.5vh;
        width: auto;
        margin-right: 0.7vw;
          "
/>
代码语言:txt
AI代码解释
复制
    然而,只有v-for或者其他变量生成的**动态路径**,在反向代理后无法加载。要知道在开发环境和内网生产环境都没有问题,却在反向代理之后出错了,这是为什么呢?
代码语言:txt
AI代码解释
复制
    举个会出错的例子:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      <!-- 使用v-for动态渲染模块,并填充图片,动态生成图片路径的方式 -->
      <el-row class="row" :gutter="0">
        <el-col
          v-for="(item, i) in urlReport"
          :span="6"
          class="chapter-col"
          justify="center"
          :key="i"
        >
          <div class="singleDownload" @click="downloadByUrl(item.url)">
            <div class="card-image-container">
              <img :src="'/download/report' + ( i + 1 ) + '.png'" class="card-image" />
            </div>
            <div class="description">
              {{ item.reportName }}
            </div>
          </div>
        </el-col>
      </el-row>

二、反向代理原理简介

代码语言:txt
AI代码解释
复制
    反向代理的基本原理是,客户端的请求先发送到代理服务器,代理服务器再将请求转发给真实的后端服务。比如我将一个项目只部署到一个内网服务器上,同时反向代理到一个可公开访问的代理服务器上,这样用户只需要访问这个代理服务器,代理服务器就会将请求发送到内网的真实服务器上并获取相应资源。这样可以避免用户直接接触真实服务器。同时也可以通过一个域名挂载多个前端项目。
代码语言:txt
AI代码解释
复制
    在前端项目中,反向代理通常用于跨域请求、资源代理等场景。当反向代理配置不当时,可能导致一些资源的路径错误,进而导致资源加载失败。

三、造成该现象的原因

代码语言:txt
AI代码解释
复制
    问题的根源在于 Vite 的动态路径解析方式。在开发环境中,Vite 会根据根路径(base)自动解析资源路径,但当通过反向代理部署时,代理服务器可能会为项目添加一个子路由路径(根据nginx的配置来决定)。这个路径的变化影响了 Vite 对资源路径的解析,导致动态生成的路径与实际资源路径不一致,因此找不到对应的图片资源。
代码语言:txt
AI代码解释
复制
    具体来说,当我们使用动态路径时,Vite 默认将其视为相对于项目根路径来解析,但当反向代理添加了子路由路径后,动态路径没有考虑到这个变化,最终导致图片无法加载。
代码语言:txt
AI代码解释
复制
     以这个nginx配置为例,部署之后拼接的资源动态路径就是“域名+high+动态路由”,可如果你的项目base目录是默认值或者“./”,那资源的实际路径其实是“域名+动态路由”,自然就会报404错误。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
server {
    listen 8001;
    server_name xxx.xx.xxx.xx;

    location /high/{
        alias E:/deploy/developmentV2.0-update2024report/; 
        try_files $uri $uri/ /project1/index.html;
    }
}

四、解决方案

代码语言:txt
AI代码解释
复制
    为了解决这个问题,本文提供了三种不同思路的解决方案。欢迎大家根据自己的需求选择合适的方案,也欢迎在评论区分享其他解决思路。
1、放弃动态渲染
代码语言:txt
AI代码解释
复制
    这个方案的思路比较简单:如果动态渲染无法正常加载图片,那么就放弃动态渲染,改为静态引用。属于是“解决不了问题,就解决产生问题的对象”。但它不适用于需要大量渲染、图片较多的场景,因此不具备长效解决问题的作用。
2、在页面挂载的时候引入图片资源
代码语言:txt
AI代码解释
复制
    动态路径是在运行时才解析并加载图片资源。我们可以通过import提前加载图片并将其存储到数组中。这样,动态渲染时只需要从已加载的图片数组中获取资源,避免了路径解析的问题。具体实现如下:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      <el-row class="row" :gutter="0">
        <el-col
          v-for="(item, i) in urlReport"
          :span="6"
          class="chapter-col"
          justify="center"
          :key="i"
        >
          <div class="singleDownload" @click="downloadByUrl(item.url)">
            <div class="card-image-container">
              <img :src="reportPic[i]" class="card-image" />
            </div>
            <div class="description">
              {{ item.reportName }}
            </div>
          </div>
        </el-col>
      </el-row>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 图片存放路径
const webPic = ref([]);
const reportPic = ref([]);
 
 
// 异步加载图片
Promise.all([import("/download/web1.png"), import("/download/web2.png")]).then(
  (images) => {
    webPic.value = images.map((image) => image.default);
  }
);
Promise.all([
  import("/download/report1.png"),
  import("/download/report2.png"),
  import("/download/report3.png"),
  import("/download/report4.png"),
  import("/download/report5.png"),
  import("/download/report6.png"),
  import("/download/report7.png"),
  // import("/download/report8.png"),
  import("/download/report9.png"),
  import("/download/report10.png"),
  import("/download/report11.png"),
  import("/download/report12.png"),
  import("/download/report13.png"),
]).then((images) => {
  reportPic.value = images.map((image) => image.default);
});

在构建时,Vite 会处理这些图片资源,并将其打包到最终的构建目录中。import 会返回一个模块对象,其中 default 属性包含了图片的实际路径,所以不受base路径变化的影响。

代码语言:txt
AI代码解释
复制
    简单点说,不管你的开发环境base路径是什么,生产环境base路径是什么,你都可以用这种方法批量获得路径。
3、修改base路径(最推荐)
代码语言:txt
AI代码解释
复制
    既然我们已经知道了问题的原因,最直接的解决办法是修改 Vite 的 base 路径,使其与反向代理的实际路径匹配。你可以还是按照原来的写法:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      <!-- 使用v-for动态渲染模块,并填充图片,动态生成图片路径的方式 -->
      <el-row class="row" :gutter="0">
        <el-col
          v-for="(item, i) in urlReport"
          :span="6"
          class="chapter-col"
          justify="center"
          :key="i"
        >
          <div class="singleDownload" @click="downloadByUrl(item.url)">
            <div class="card-image-container">
              <img :src="'/download/report' + ( i + 1 ) + '.png'" class="card-image" />
            </div>
            <div class="description">
              {{ item.reportName }}
            </div>
          </div>
        </el-col>
      </el-row>
代码语言:txt
AI代码解释
复制
    然后在 vite.config.js 中配置 base 选项:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default defineConfig({
    base: '/你的子路径/'
});
代码语言:txt
AI代码解释
复制
    这里的子路径是由反向代理的路由决定的。比如你的域名是www.jd.com,你将项目反向代理到www.jd.com/newProject上,那么base的值就是"/newProject/"。这里其实就是老生常谈的**“开发环境应与生产环境一致”**的体现**。**

五、总结

代码语言:txt
AI代码解释
复制
    回头来看,这其实是一个很简单的问题,只需要遵守开发环境应与生产环境一致的原则就好了,可是在我真正做一次部署之前是没法深刻理解这句话的含义的,不吃一堑就是不长一智,那能怎么办呢?去年我甚至都没意识到根本问题出在哪,只是找到了一种解决方案(上述第二种)。希望我这篇博客能帮助大家理解这句话,或者在犯了错的时候找到解决方案。
代码语言:txt
AI代码解释
复制
    本篇博文详细分析了 Vue3 + Vite 前端项目在反向代理部署后,部分图片(动态路径图片)无法加载的问题。通过分析问题的原因,并结合三种解决方案(放弃动态渲染、提前引入图片资源、修改 base 路径),我们可以有效地解决这一问题。希望本篇文章能为大家解决类似问题提供帮助。
代码语言:txt
AI代码解释
复制
    只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
2 条评论
热度
最新
大佬方便给个微信有不懂的问题请教你吗?
大佬方便给个微信有不懂的问题请教你吗?
11点赞举报
xiaobawang114
xiaobawang114
回复回复点赞举报
推荐阅读
探秘 AI Agent 之 Coze 智能体:插件创建与使用(7/30)
摘要:Coze 智能体作为新一代 AI 应用开发平台,其插件功能发挥着至关重要的作用。本文详细阐述了 Coze 智能体插件的多方面内容。首先介绍平台特点及插件重要性,插件能通过调用外部 API 扩展智能体能力。接着分析其功能扩展优势及与其他功能协同性,在内容创作、数据分析等多领域有广泛应用场景。文中细致讲解了插件创建步骤,从准备工作到具体流程,包括配置信息、设置参数及测试发布等。还说明了插件使用方法,如添加到智能体、结合工作流运用及多插件协同案例。通过不同场景实战案例展示其价值,并分享常见问题解决办法。最后探讨行业趋势,展望插件未来功能拓展方向,为读者深入理解和运用 Coze 智能体插件提供全面指导。
正在走向自律
2024/12/18
2.5K0
探秘 AI Agent 之 Coze 智能体:插件创建与使用(7/30)
探秘 AI Agent 之 Coze 智能体:从简介到搭建全攻略(4/30)
Coze 智能体是基于机器学习和自然语言处理技术的软件实体,它在人工智能领域扮演着重要的角色,能够像一个智能助手一样,通过与外界环境进行交互学习,进而执行各种各样的任务。
正在走向自律
2024/12/18
12.5K0
探秘 AI Agent 之 Coze 智能体:从简介到搭建全攻略(4/30)
如何快速搭建AI智能客服?
在这个AI时代,把AI客服融入你的业务,不仅能让客户体验升级,还能让你的服务更高效。那么,如何快速接入AI客服能力呢?接下来,我就带你一起探索用扣子Coze智能体模版+飞书表格搭建你的专属AI智能客服。
陈宇明
2025/02/26
1K0
如何快速搭建AI智能客服?
智能Agent如何改造传统工作流:从搜索到全能助手
还记得我们以前搜索信息的方式吗?输入关键词,浏览大量结果,筛选有用内容,再整合成我们需要的答案。这个过程不仅耗时,还常常让人感到疲惫。
LeonAlgo
2025/03/27
2660
智能Agent如何改造传统工作流:从搜索到全能助手
Coze工作流介绍(一)
工作流支持通过可视化的方式,对插件、大语言模型、代码块等功能进行组合,从而实现复杂、稳定的业务流程编排,例如旅行规划、报告分析等。
Maynor
2024/05/26
2K0
Coze工作流介绍(一)
Coze背后的人,你什么时候顿悟的Agent?
过去一段时间,我深度体验了coze平台,随着它新版本的发布,我意识到自己以前对Agent的理解在细节上的偏差,而coze背后的产品团队,让我理解了真正的Agent,应该长什么样子。
否子戈
2024/06/12
9310
Coze背后的人,你什么时候顿悟的Agent?
Multi-agent mode实践 | 用coze手捏一个bot
今天这篇文章着重学习一下coze的Multi-agent 模式,按需学习,感谢理解~
AIGC新知
2024/10/08
1.3K0
Multi-agent mode实践 | 用coze手捏一个bot
基于Workflow的Agent应用设计与实战
2023年市面上出现了很多和大模型相关的产品,旧金山的Prompt AI融资了500万美元,来自新加坡的Neuronicx成为全球最知名的GPT账号服务商,国内的各类套壳网站通过广告和会员赚的盆满钵满。之后,文心一言、通义千问、智普清言等服务商迅速降低了国内的大语言模型使用门槛,字节发布了第一个面向普通用户的手机App豆包则把大模型的使用门槛进一步拉低。2024年,初创公司Cognition Labs发布了全球首款全智能AI程序员Devin,字节发布coze,大模型开发进入了新的事态,让普通非编程用户基于大模型做符合自己需求的应用成为可能。
否子戈
2024/04/26
2.2K1
基于Workflow的Agent应用设计与实战
《使用coze搭建一个会搜索、写ppt、思维导图的Agent》
Coze不仅是一个AI开发平台,它是你通向未来的钥匙。想象一下,只需几个简单的步骤,你就能创建一个功能强大的AI助手,为你解决各种工作难题!
LeonAlgo
2025/02/26
1K0
《使用coze搭建一个会搜索、写ppt、思维导图的Agent》
工作流哪里用,智能体get
在昨天的文章中,我们讲述了如何在腾讯元器平台快速搭建一个文生图工作流,具体的文生图工作流搭建可以看我的文章:
六月的雨在Tencent
2025/04/08
6010
扣子(Coze):构建智能助手并嵌入个人网站的新选择
所以,综合这些原因,我放弃了在个人网站中使用 MaxKB,但是我并不否认它是一个很好的产品;只是对于我想集成一个智能助手到个人网站的这个需求而言,他并不是最好的选择;
MinChess
2024/11/13
2.7K0
扣子(Coze):构建智能助手并嵌入个人网站的新选择
深入浅出 AI 智能体(AI Agent)|技术干货
随着人工智能技术的飞速发展,智能体(AI Agents)正逐渐成为人与大模型(如大语言模型)交互的主要方式。智能体是能够执行任务、解决问题并提供服务的 AI 系统,它们通过模拟人类的行为和决策过程,使得与大模型的交互更加自然、高效和个性化。
Botnow
2024/09/10
5.7K0
深入浅出 AI 智能体(AI Agent)|技术干货
继ChatGPT的热潮AI的新产物-智能体元器Agent平台
2 年前, OpenAI发布了他们划时代的产品 《ChatGPT》 那时整个世界都为之疯狂,当然我也不例外!
杨不易呀
2024/06/29
6170
继ChatGPT的热潮AI的新产物-智能体元器Agent平台
使用扣子 coze 搭建你的专属程序员鼓励师女友
👋 你好,我是 Lorin 洛林,一位 Java 后端技术开发者!座右铭:Technology has the power to make the world a better place.
Lorin 洛林
2024/03/11
1.3K0
Coze扣子开发指南:怎样建立一个工作流?
Coze扣子的工作流支持通过可视化的方式,对插件、大语言模型、代码块等功能进行组合,从而实现复杂、稳定的业务流程编排。
AIGC部落
2024/06/24
2.7K0
Coze扣子开发指南:怎样建立一个工作流?
AI Agent构建到执行全自动化,RPA Agent持续进化再次降低智能体应用门槛
智能体的爆发,意味着大语言模型的快速落地与应用。所以它一经提出便如泄洪之水一发而不可收,直至现在如火如荼。
王吉伟频道
2024/09/02
2740
AI Agent构建到执行全自动化,RPA Agent持续进化再次降低智能体应用门槛
AI全栈工程师的新舞台:Coze(扣子)
在当前科技飞速发展的背景下,Coze作为一款引领潮流的AI应用平台,正以破竹之势重塑着我们对于智能应用的认知。Coze不仅仅是一个工具,它是一个集合了前沿AI技术、高效开发环境与创意无限的应用生态于一体的创新平台,旨在让每一位开发者和用户都能轻松拥抱AI的无限可能。
淼学派对
2024/06/11
8440
AI全栈工程师的新舞台:Coze(扣子)
Coze:开启AI聊天机器人的全新篇章
在上篇文章第一个 AI 应用中写到我通过 Coze 平台开发了第一个 AI 应用,其实也没什么特别的,就一聊天机器人。我选择发布在 Discord,所以平常是这样使用的:
云水木石
2024/01/23
1.6K0
Coze:开启AI聊天机器人的全新篇章
ComfyUI Party:将LLM与图片工作流集成,图片、语音、文本、视觉一体!(graphRAG、ollama)
我们正在使用一些Agent平台如FastGPT和Dify,他们注重于快速生成文本内容,知识库问答,提供自定义能力和与现有系统的集成性。
AI进修生
2024/12/02
1.4K0
ComfyUI Party:将LLM与图片工作流集成,图片、语音、文本、视觉一体!(graphRAG、ollama)
探秘多AI Agent模式:机遇、应用与未来展望(5/30)
摘要:多 AI Agent 模式是一种强大的人工智能架构,它利用多个智能体(Agent)之间的协作与交互来解决复杂问题、执行多样化任务并模拟复杂系统行为。在这种模式中,每个 Agent 都具备独立的感知、决策和行动能力,通过相互协作和信息共享,实现系统整体目标的优化。
正在走向自律
2024/12/18
6150
探秘多AI Agent模式:机遇、应用与未来展望(5/30)
推荐阅读
相关推荐
探秘 AI Agent 之 Coze 智能体:插件创建与使用(7/30)
更多 >
LV.1
广州讯南网络科技有限公司技术主管
目录
  • Vue3+vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案
    • 一、情景介绍
      • 1、问题出现的场景
      • 2、无法加载的图片写法
    • 二、反向代理原理简介
    • 三、造成该现象的原因
    • 四、解决方案
      • 1、放弃动态渲染
      • 2、在页面挂载的时候引入图片资源
      • 3、修改base路径(最推荐)
    • 五、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档