nginx 部署vue项目 部分图标加载不出

最新推荐文章于 2023-11-06 17:10:40 发布
原创 最新推荐文章于 2023-11-06 17:10:40 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

在使用nginx部署时遇到图片加载失败的问题，经排查发现部分图标文件的名称为中文，导致了乱码。通过更换压缩工具从360rar改为winzip后，问题得到解决，正常加载了中文命名的图片资源。

###nginx 部署 图片加载失败
解析打包的文件发现 dist中部分图标文件是中文名出现乱码

本人使用的 360rar 压缩的文件 后来替换位 winzip 压缩 就好了

vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4679
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
Jenkins+Docker实现部署你的Vue应用
老曹的博客
09-12 2610
什么是自动化 在没有工具的时代，有很多重复性的工作都是人手工完成的，比如在田地里收割果实、在流水线上加工等。而有了工具后，我们解放了双手，从而把精力放在更重要的事情上，让工具帮我们去完成那些重复性的工作，来提高效率，这就是我理解的自动化。在软件开发中更是如此，大家为了“变懒”，使自动化测试、自动化部署、自动化构建等类型的工具层出不穷。而这篇文章主要是记录一下我学习使用CI/CD工具jenkins来...
ruoyi-vue前后端分离框架上传图片不显示问题，nginx解决方案
ytgytg28的博客
10-24 5391
使用若依前后端分离框架，前端项目打包在Nginx,上传图片时，图片上传成功，但是在列表页和添加/修改页面没有正常显示。解决办法：nginx.conf在location中添加alias。这时候就能正常访问到图片，可以正常显示了。alias 作用是将url路径中的。注意字后的斜杠 (/)不能省略。此时样式是打不开的，无法找到路径。域名/ip+端口号+匹配到的内容。alias后面设定的内容。
小白Vue3+Nginx实现部署
热门推荐
Sumuxi9797926的博客
12-09 1万+
记录一下自己想搭建一个自己的个人网站的心路历程，其实我刚开始的落脚点是找一个别人的半成品或者成品，再慢慢的改，想把主要的精力放在后台上面，找了很多网站之后，例如,，不是项目很久没有维护了，就是好看的没有适合我的🙃（怪我，太菜了~傻狗哽咽🐮🐴），最后还是决定用vue3自己从0开始学，开始搭建。
nginx部署vite4+vue3项目（解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等）
爱吃雪糕的小布丁的博客
08-17 6658
解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等
vue解决打包部署到nginx中icon图标不显示的问题
weixin_44006009的博客
11-06 842
vue nginx 部署 icon图标 不显示
解决Vue用Nginx做web服务器报错favicon.ico 404 (Not Found)的问题
weixin_33798152的博客
05-26 1947
　　有多种解决方案 1、vue静态资源 　　vue中为网页增加favicon的最便捷的方式为使用link标签 <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" rel="external nofollow" /> 　　先在static目录下添加favicon，至于为什么要在static...
用 Vue+ElementUI 搭建后台管理极简模板
图雀社区
03-25 3954
本文由图雀社区成员 灿若星空 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。 写在前面 此篇文章为一篇说明文档，不是教你从零构建一个后台管理系统，而是基于一个实际项目，已经搭建好了一个后台管理系统的基础框架，教你如何在此基础上快速开发自己的后台管理系统，能让读者能在掌握一些基础知识的情况下，也能上手vue后台开发。只有接触项目，才能更好地理解自己所学知识的意义，...
【项目总结】玛嘉环境物联网平台（大三学生独立完成的真实企业外包项目）网脉通用物联网平台网脉铁塔监测系统
drnrrwfs的博客
02-23 926
文章目录 前言 一、概述 1.背景 2.三者的关系 二、设计中遇到的问题与思考 背景 1.如何确定需求？ 2.如何接手这个设计堪忧的项目？ 3.如何进行数据建模？ ①物联网情境下如何存储数据？ ②如何根据自身需求在TDengine上进行数据建模？ ③如何抽象出物联网设备的通用模型？ ④如何进行数据库表设计？ 4.如何与设备通讯？ ①设备如何与系统连接 ②如何判断设备状态 ③如何解析完全不一致的设备数据 ④如何做到反向控制 5.如何设计物联网领域的通用解决方案 ①设备服务 ②
本地硬件联动实战：Python驱动串口_摄像头与Vue前端实时交互全流程
# 本地硬件联动系统：从串口通信到全栈实时可视化的深度实践 在智能家居设备日益复杂的今天，确保无线连接的...而我们今天要聊的这套 **基于 Python + Flask + Vue 的本地硬件联动架构**，正是为了解决这种“看得见
解决部署vue2项目到nginx后图标不显示的错误
weixin_50117748的博客
09-13 1410
以解决部署vue2项目到nginx后图标不显示，控制台报此错Uncaught SyntaxError: Unexpected token ‘＜‘
NGINX部署项目后浏览器选项卡icon图标不显示
寻找心的旅程
11-30 8500
在项目web.xml文件中添加： ico image/x-icon
vue打包部署到nginx后,后端返回的图片不显示
g56467467464的博客
05-06 1337
需要以网络图片形式加载 this.getRequest( "/video/page?current=" + this.currentPage + "&size=" + this.pageSize + "&name="+this.keywords ).then((resp) => { this.tableLoading = false; if (resp && resp.status == 200)
vue 2.0项目 favicon.ico不显示 解决方案
xp5xp6的博客
01-26 2130
1、最好把favicon.ico放到 index.html放到同一目录 2、在webpack 配置文件里面配置 // 在webpack.dev.conf.js 里面的 plugins配置 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, f...
vue项目nginx代理图片访问请求
平静的大海
05-30 4400
vue前台访问springboot项目图片，路径无法访问到图片文件，需要做下地址转换，推荐在springboot中配置虚拟路径，但是如果很多地方已经配置的磁盘路径，修改的地方比较多，可以使用nginx做代理，通过nginx拦截图片请求来处理，也是不错的。 这个配置可以参考。https://www.cnblogs.com/qingmuchuanqi48/p/11831389.html 个人收藏，仅用来收藏。 ...
【前端】【vue】【nginx】nginx部署vue的坑——页面图片不显示
初叙
08-30 3837
描述：在使用nginx部署vue项目时，在nginx上给服务器图片配了一个代理/img/，项目启动后服务器地址的图片没有问题，但是在项目静态资源的图片不显示，路径都对。 原因：项目图片资源路径也是/img/开头的，应该是这两种访问重复了，导致找不到图片。 解决办法：为了方便我将服务器那个名称换了一个，完成。 ...
vue项目打包后，浏览器上显示的页面标题前图标不显示，打包之后丢失ico图标丢失
weixin_43185419的博客
10-22 2665
问题描述： vue项目本地运行时，页面标题前的图标可以正常显示： 打包之后却变成了： 原因分析： 图标丢失 打包后路径错误 解决方式： 图标丢失 打开打包文件： 可以看到图标还在，所以排除。 打包后路径错误 打开index文件，查看在当前文件夹下，路径指向的位置是不是错了。 比如我这里icon和index.html是放在一块的，路径写成了 <link rel="icon" href="../test.ico"> 指向根目录，打包后放在服务器下运行位置就不对了。 改成：
如何解决Nginx服务器端iconfont字体无法显示问题
laochen156的博客
06-25 1523
在使用子域名访问根域名的CSS时，发现字体无法显示，在确保CSS和Font字体的路径加载无问题后，基本确定是因为跨域的问题。 通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址。 在Nginx的conf目录下修改nginx.conf，添加以下代码： location ~* \.(eot|ttf|woff|svg|otf)...
Nginx配置文件错误导致图片资源404
qq_36132999的博客
03-07 2352
背景 前段时间跟着视频学习了一下Django框架，搭了一个博客站点（Vue+Django前后端分离，阿里云ESC部署（Ubuntu 18.0），Nginx代理服务器），代码本地环境测试无误后就更改ajax请求地址为部署站点项目地址，但是前后端代码部署到阿里云以后，所有功能都ok，就是图片资源加载不出来，如下图： 期望的效果应该如下图，能正确显示图片： 分析原因 首先肯定是自查代码了，但是反复查看以及本地调试均无问题，后端也设置了跨域允许，于是最后将原因范围锁定在nginx服务器配置上。 通过控制台查看信
Nginx部署多个Vue项目配置详解
当项目进入生产环境时，通常需要将多个 Vue 项目部署到同一个服务器上，并通过 Nginx 进行反向代理与路由分发，以实现高效、安全的访问控制。本文所提及的【标题】“Nginx部署多个Vue项目详细方法示例”以及【描述】...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田十一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值