nuxt.js使用proxy代理图片url

最新推荐文章于 2024-04-19 19:55:56 发布
最新推荐文章于 2024-04-19 19:55:56 发布
阅读量585 收藏 1
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_ax/article/details/122069737
版权

上传图片详情页时，后台没有返回正确的图片地址，返回如下
在这里插入图片描述

<p><strong>与宋词有个约会</strong></p><p><img src=\"/dev-api/profile/upload/2021/12/10/d980caf5-00aa-4611-9361-9c7cb1f79f70.png\"></p>

所以加载时图片地址报错，需要前端做一下代理
在nuxt.config.js里加入以下代码：即可

 proxy: [
    ['/dev-api', { target: 'http://url地址', pathRewrite: {"^/dev-api": ""}}]
  ],
Lucky宝宝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript常见代理模式之图片预加载
没有感情的代码机器的博客
12-15 261
在WEB开发中，图片预加载是一种常用的技术，如果直接给某个img标签节点设置src属性，由于图片过大或者网络不佳，图片的位置往往有段时间会是一片空白。常见的作法是先用一张loading图片作为占位符，然后用异步的方式来家在加载图片，等到图片加载完毕，我们再把它填充到img的节点里。这种场景很适合使用虚拟代理。 首先创建一个普通的本体对象，这个对象负责往页面中创建一个img标签，并且提供一个对外的s...
代理邀请海报：图片url转base64格式
xiaoququ的博客
05-15 232
//common.js /** * @description: 图片转base64 * @param {String} url 需要转换的图片原链接（http://....jpg） * @param {String} outputFormat 转换出来的图片的类型（canvas支持jpg/png格式） * @return: 返回图片对应的base64编码 */ export const getBas64 = (url, outputFormat = "image/jpg") => { r
nuxt3使用记录五：启动压缩构建并自定义静态资源代理（不仅限于nuxt3）
最新发布
lsjweiyi的博客
04-19 695
nuxt3也同样自带压缩功能，默认支持两种格式gzip，br对比可以发现，压缩后大小减少很多，其中br格式压缩率最高nuxt3通过SSG构建完静态资源，它会提醒你直接执行命令即可代理运行，并且会根据请求头判断客户端是否支持压缩格式，支持的话优先返回压缩后的文件。不得不说nuxt3在细节方面还是做得不错的。
Nuxt.js vue-quill-editor 图片 上传 保存
weixin_30687811的博客
11-28 357
1. 安装vue-quill-editor (Git地址) npm install vue-quill-editor --save 2. 在Nuxt.js框架中配置 plugins文件夹中新建：vue-quill-editor.js import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/di...
nuxt 设置本地代理
yongjian_123的博客
07-30 5295
nuxt 设置本地代理 首先安装 npm i @nuxtjs/axios @nuxtjs/proxy -D 修改nuxt.config.js文件 module.exports = { modules: [ // Doc: https://github.com/nuxt-community/axios-module#usage '@nuxtjs/axios', ...
imageproxy图片代理服务
nishuihan_liang的博客
07-13 954
imageproxy是一个用go编写的缓存图片代理服务器。其特点：基本图像调整，例如调整大小、裁剪和旋转使用允许的主机列表或请求签名 (HMAC-SHA256) 进行访问控制支持 jpeg、png、webp（仅解码）、tiff 和 gif 图像格式（包括动画 gif）在内存中、磁盘上或使用 Amazon S3、Google Cloud Storage、Azure Storage 或 Redis 进行缓存易于部署，因为它是纯粹的。
Nuxt.js之自动路由原理的实现方法
10-17
在`Builder`类的`generateRoutesAndFiles`方法中，Nuxt.js使用`glob`库扫描`pages`目录下的所有文件。这个过程会收集到所有Vue组件的路径，然后调用`createRoutes`函数来生成路由配置。`createRoutes`通常位于`...
使用Nuxt.js改造已有项目的方法
10-18
主要介绍了使用Nuxt.js改造已有项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nuxt.js 数据双向绑定的实现
10-17
主要介绍了Nuxt.js 数据双向绑定的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nuxt-template：Nuxt.js项目模板
02-13
模板我很棒的Nuxt.js模板构建设置# install dependencies$ yarn install# serve with hot reload at localhost:3000$ yarn dev# build for production and launch server$ yarn build$ yarn start# generate static ...
device-module:Nuxt.js模块，用于检测设备类型
04-28
使用yarn或npm将@nuxtjs/device添加到开发依赖项中。 yarn add --dev @nuxtjs/device # Using npm npm install -D @nuxtjs/device 将它添加到buildModules你的部分nuxt.config ： { buildModules : [ '@nuxtjs/...
使用OpenResty进行图片代理（破解反盗链）
Fouy_风度玉门。
07-16 1401
今天在使用scrapy爬取网站的时候，因为网站的容量有限，不能拉取图片进行存储。但是源站的图片又存在着反盗链的限制，所以利用OpenResty做了一个图片代理的接口，实现了破解反盗链的功能。（如果你要问我为什么使用OpenResty来做，我会告诉你因为网站就是用OpenResty开发的） lua-resty-http 在OpenResty上面使用代理时，一般情况下会用proxy_pass或...
Nginx Proxy 代理配置图片缓存的实例参考
u010090557的博客
01-03 675
在Nginx环境中，可以使用Nginx 的 proxy_store 把主服务器的静态内容缓存到本地，即实现图片缓存。第一次访问结束后，以后的访问将直接在本地硬盘上读写，从而分担流量负载，提高访问速度与用户体验。 以下是配置代码：  events { use epoll; worker_connections 65535; } server { include ...
nuxt3：nitro devProxy（本地代理）
snowball的博客
02-02 6939
ssr为true模式下，使用useFetch()访问全路径接口地址，这样是能访问通的，经过测试本地开发环境，项目部署后服务器环境，都没有问题。第一个“/api”是为了配合本地代理增加的，这里通过测试个人理解似乎是“/api”被替换成空了，类似在rewrite被替换成空字符串一样。同理如果本地代理写成“/m-staff-center”，那么请求接口时候前边增加“/m-staff-center”。经过测试，这样的方式，本地代理成功。nitro 本地代理，为什么会这样呢，有待继续探索。二、nitro本地代理。
Nuxt配置代理
junhian的博客
07-04 734
【代码】Nuxt配置代理。
Nuxt - 详细配置 proxy 跨域代理（设置代理解决前端跨域问题）
王佳斌
07-08 5910
很多朋友出现了跨域、无法请求数据等问题，其实就是 跨域没配或配的不对 问题。在项目根目录，执行如下安装命令（cnpm / yarn）： 第二步 打开项目根目录下 配置文件，在 配置项位置，加入以下代码： 打开项目根目录下 配置文件，在 配置项位置，修改或加入以下代码： 还是在项目根目录 配置文件里，加入（或修改） 配置项，一键复制以下代码： 您也可以用 Nuxt.js 的 http-proxy 中间件解决方案 ，详见 https://github.com/nuxt-community/prox
富文本编辑器wangEdiotr，编辑表格后，重新打开组件报错Error in callback for watcher “value“: “Error: Cannot find a descenda
u013922289的博客
09-16 6324
父组件中对子组件的调用,子组件销毁
img 标签src调用API返回base64字符串的解决办法
黄彪博客
04-09 4118
文章目录问题描述验证过程解决办法 问题描述 公司系统的图片是存储到一个专门的文件服务器上的，为了安全起见，提供了一个API接口，返回的是图片的base64格式的字符串，后台直接调用文件服务器的API，拿到字符串返回给前端 考虑到以前验证码也是使用src的地址是一个API图片接口，就能显示相关的图片，因此就想当然图片能够正常显示 验证过程 接口返回的是base64字符串，没有添加’data:im...
若依分离版—移动端开发通知公告功能
鲸鱼姐的专栏
07-13 5807
本文是在若依-ruoyi-AiDex-Uniapp的基础上增加通知公告功能，实现若依移动端 ​
nuxt.js项目配置proxy不起作用
09-10
4. 代理中间件问题：在一些情况下，如果Nuxt.js项目使用了其他的中间件，可能会与Proxy产生冲突。需要检查项目中是否存在其他中间件，并确保它们与Proxy的配置兼容。 5. 缓存问题：有时候，浏览器或其他代理会缓存...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值