服务器访问本机图片nginx配置

news2024/12/25 9:56:59

这是图片所在的位置
下面是Nginx的配置
nginx对静态资源的配置

然后是yml文件配置
在这里插入图片描述
后端返回给前端的数据直接返回这个地址就可以了

{
    "success": true,
    "code": "200",
    "msg": "操作成功",
    "data": [
        {
            "趋势": "https://120.26.98.185:8090/shanhaijing/data/up.png",
            "来电地区": "重庆",
            "来电量": 58
        },
        {
            "趋势": "https://120.26.98.185:8090/shanhaijing/data/up.png",
            "来电地区": "杭州",
            "来电量": 12
        },
        {
            "趋势": "https://120.26.98.185:8090/shanhaijing/data/up.png",
            "来电地区": "抚州",
            "来电量": 11
        },
        {
            "趋势": "https://120.26.98.185:8090/shanhaijing/data/down.png",
            "来电地区": "郑州",
            "来电量": 2
        }
    ]
}

这样前端就能直接访问到服务器本机上的图片了
在这里插入图片描述

其中最主要的是nginx的配置需要与图片的所在的目录相对应
nginx配置

  location / {
        root   /usr/local/src/nginx/html/maquehaishiju;
        index  index.html index.htm;
    }

图片所在位置

/usr/local/src/nginx/html/maquehaishiju/shanhaijing/data/hot.png
/usr/local/src/nginx/html/maquehaishiju/shanhaijing/data/up.png

返回给前端的图片地址

 "趋势": "https://120.26.98.185:8090/shanhaijing/data/up.png"
 "趋势": "https://120.26.98.185:8090/shanhaijing/data/down.png"

当前端访问趋势的路径
https://120.26.98.185:8090/shanhaijing/data/up.png时,
nginx配置 location /,会把root的目录添加的到路劲里面
变成

https://120.26.98.185:8090//usr/local/src/nginx/html/maquehaishiju/shanhaijing/data/up.png

这样就变成我们在服务器中的本地地址了,前端能正常访问图片了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1005953.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Day62|图part1:深度优先搜索理论基础、797. 所有可能的路径

深度优先搜索&#xff08;DFS&#xff09;理论基础 图的实质和存储方式 图实际上就是一棵多叉树&#xff0c;可以用以下的数据结构进行表示&#xff1a; class Vertex {int id;vector<Vertex*> neighbors; };多叉树的&#xff1a; /* 基本的 N 叉树节点 */ class Tre…

第一章 计算机系统概述 八、虚拟机

目录 一、传统虚拟机的结构 二、两类虚拟机管理程序 &#xff08;1&#xff09;定义&#xff1a; &#xff08;2&#xff09;区别&#xff1a;&#xff08;考点&#xff09; 一、传统虚拟机的结构 二、两类虚拟机管理程序 &#xff08;1&#xff09;定义&#xff1a; &…

电子企业MES管理系统实施的功能和流程有哪些

MES生产管理系统是一种应用于电子企业的管理系统&#xff0c;旨在提高生产效率、降低浪费、优化资源利用&#xff0c;并实时监控和改善生产过程。在电子企业中&#xff0c;实施MES管理系统对于实现精细化管理、增强信息互联、提高产品质量和交货期等方面具有重要作用。 一、MES…

模电课设:用Multisim了解三极管特性及计算静态工作点

1 课设内容 1&#xff09;绘制三极管输入特性曲线、输出特性曲线、放大倍数的幅频特性&#xff1b; 2&#xff09;测试三极管放大倍数β与VBE的关系、放大倍数与温度的关系&#xff1b; 3&#xff09;利用Multisim计算静态工作点。 2 模型搭建 电路一&#xff1a;绘制三极管…

字节一面:如何实现单行/多行文本溢出的省略样式?

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;作为一名前端开发工程师&#xff0c;css是我们的必备技能&#xff0c;文本溢出问题也是我们经常遇到的问题&#xff0c;我们不仅只是处理这种情况&#xff0c;还要考虑他的…

微信小程序 通过 pageScrollTo 滚动到界面指定位置

我们可以先创建一个page 注意 一定要在page中使用 因为pageScrollTo控制的是页面滚动 你在组件里用 他就失效了 我们先来看一个案例 wxml 代码如下 <view><button bindtap"handleTap">回到指定位置</button><view class "ControlHeight…

证件照电子版怎么做?学会这个方法自己就会做证件照

自己制作证件照的好处在于可以根据需要调整照片的大小、背景颜色以及美颜等设置&#xff0c;以满足不同场景下的使用需求。此外&#xff0c;自己制作证件照还可以更好地保护个人隐私&#xff0c;避免使用公共设备拍摄证件照时泄露个人信息。 总的来说&#xff0c;自己制作证件…

Webpack Sourcemap文件泄露漏洞

Webpack Sourcemap文件泄露漏洞 前言一、Webpack和Sourcemap1.1 什么是Webpack1.2 什么是Sourcemap 二、漏洞利用2.1 使用reverse-sourcemap工具2.1 直接看前端代码 三、漏洞挖掘漏洞修复 前言 Webpack主要是用于前端框架进行打包的工具&#xff0c;打包后形成.js.map文件&…

Revit SDK 介绍:CurtainSystem 幕墙系统

前言 这个例子介绍如何创建和修改幕墙系统。 内容 如图所示&#xff0c;创建一个幕墙系统&#xff0c;这个系统里有三个面。 创建幕墙系统 // 遍历体量元素的几何&#xff0c;得到所有的面&#xff0c;保存在 m_mydocument.MassFaceArray // 获取用户选中的面 FaceArray …

哪种IP更适合你的数据抓取需求?

程序员大佬们好&#xff01;今天我要和大家分享一个关于数据抓取的话题&#xff0c;那就是Socks5爬虫ip和动态IP之间的比较。在进行数据抓取时&#xff0c;选择适合自己需求的工具和技术是非常重要的。Socks5爬虫ip和动态IP都是常见的网络工具&#xff0c;它们在数据抓取方面都…

节能灯与led灯哪个对眼睛好一点?精选好用的led护眼灯

节能灯和led灯相比&#xff0c;肯定是led灯更加护眼一点的。 首先节能灯最大的优点就是节能&#xff0c;可以使用的寿命长。可是和led灯相比&#xff0c;led灯的转换效率会更好一点&#xff0c;也更加节能&#xff0c;可使用寿命也很长。其次节能灯他启动会比较慢&#xff0c;散…

DC电源模块在节省能源方面上的优秀表现

BOSHIDA DC电源模块在节省能源方面上的优秀表现 DC电源模块是现代电子产品中广泛应用的一种电源转换设备&#xff0c;其能够将交流电转换成直流电&#xff0c;并为电子设备提供稳定、可靠的电源供应。相比于传统的交流电源&#xff0c;DC电源模块在节省能源方面上具有优秀的表…

【开发】React框架下如何集成H.265网页流媒体EasyPlayer.js视频播放器?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

人形机器人闭门研讨会报名丨青源Workshop第24期

青源Workshop丨No.24 人形机器人主题闭门研讨会 在全球普遍面临人口老龄化问题的情况下&#xff0c;人形机器人作为一种新兴的技术领域&#xff0c;正逐步在工业、服务、医疗等领域崭露头角&#xff0c;为制造业、农业以及各种服务业带来了新的机遇与解决方案。与传统的工业机器…

激活函数总结(三十二):激活函数补充(Serf、FReLU)

激活函数总结&#xff08;三十二&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Serf激活函数2.2 FReLU激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PReLU、Swish、ELU、SELU、GELU、Softmax、Soft…

iPhone 15 Pro深度评测:猫头虎技术团队揭秘Apple最新航空级钛设计的魅力与创新

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

python-爬虫-requests

安装模块 pip install requests在jupyter notebook里使用ShiftTab查看 requests requests库的主要方法 方法解释requests.requset()构造一个请求&#xff0c;支持以下各种方法requests.get()获取HTML的主要方法requests.head()获取HTML头部信息requests.post()向HTML网页提…

【数据结构】堆排序与TopK问题

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.堆的概念和结构 2.堆的实现 2.1向上调整…

(一)探索随机变量及其分布:概率世界的魔法

文章目录 &#x1f34b;引言&#x1f34b;什么是随机变量&#xff1f;&#x1f34b;离散随机变量&#x1f34b;连续随机变量 &#x1f34b;随机变量的概率分布&#x1f34b;离散概率分布&#x1f34b;0-1分布&#xff08;Bernoulli分布&#xff09;&#x1f34b;二项分布&#…

react频繁使用的js(input防抖请求、节流)

目录 react频繁使用的js(input防抖请求)input的防抖请求节流 提交的节流或者点击按钮等节流节流 code节流 效果 react频繁使用的js(input防抖请求) input的防抖请求 import React, { useState, useEffect, useCallback } from "react"; import { Input } from &quo…