js修改img的src属性显示变换图片到前端页面,img的src属性显示java后台读取返回的本地图片

文章目录

  • 前言
  • 一、HTML 图像- 图像标签( <img>)
    • 1.1图像标签的源属性(Src)
    • 1.2图像标签源属性(Src)显示项目中图片
    • 1.3图像标签源属性(Src)显示网络图片
  • 二、图像标签( <img>)显示本地图片
    • 2.1直接显示本地图片
    • 2.2 点击按钮显示或者刷新显示本地图片


前言

img的src属性是前端用来显示一张图片的来源,一般情况下src最常见是显示项目中resources\static问价夹下的图片,或者显示公网上的图片,如果想要在前端显示本地图片那要怎么处理呢?如果直接用本地图片的地址(例如src=“D:\Users\test.jpg”)前端是无法显示的。


一、HTML 图像- 图像标签( )

1.1图像标签的源属性(Src)

<img> 是空标签,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

这表示在前端显示项目resources\static\img\1.jpg图片。
alt 属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本属性告诉读者失去的信息。

1.2图像标签源属性(Src)显示项目中图片

<img src="img\1.jpg" alt="图片1" width="710" height="904">

1.3图像标签源属性(Src)显示网络图片

<img src="https://cn.bing.com/images/search?view=detailV2&ccid=CHB%2blvhE&id=BCC6162523ACBBC86A0B525F6D66FB3A13AA6CE9&thid=OIP.CHB-lvhE4q3AKMRtSy1MjwHaE6&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.08707e96f844e2adc028c46d4b2d4c8f%3frik%3d6WyqEzr7Zm1fUg%26riu%3dhttp%253a%252f%252fimg.pconline.com.cn%252fimages%252fupload%252fupc%252ftx%252fphotoblog%252f1606%252f09%252fc11%252f22613129_1465478292330.jpg%26ehk%3dRsVcxTWo%252f4%252fBxDh9yrKJYEpfgkI7n5SZ8zOP4fOzxOw%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=2136&expw=3216&q=%e8%93%9d%e5%a4%a9%e7%99%bd%e4%ba%91&simid=608042815603765163&FORM=IRPRST&ck=803BE79ECFB56BAE48C57F2B31E69FBA&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0" alt="图片1" width="710" height="904">

二、图像标签( )显示本地图片

2.1直接显示本地图片

<img src="http://127.0.0.1:8080/readImg" alt="图片1" width="710" height="904">

127.0.0.1是本地ip地址,8080是项目启动的端口号。
/readImg表示要请求后台返回一个图片流。下面是java后台处理的代码显示本地D:\img\1.jpg图片

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.OutputStream;@Controller
public class ShowLocalImg {@RequestMapping("/readImg")public void readImg1(HttpServletRequest request, HttpServletResponse response){FileInputStream in;try {request.setCharacterEncoding("utf-8");//页面img标签中src中传入的真是图片地址路径path = "D:\\img\\1.jpg";String filePathEcode=new String(path.trim().getBytes(), "UTF-8");response.setContentType("application/octet-stream;charset=UTF-8");//图片读取路径in=new FileInputStream(filePathEcode);// 得到文件大小int i=in.available();//创建存放文件内容的数组byte[]data=new byte[i];in.read(data);in.close();//把图片写出去OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());outputStream.write(data);//将缓存区的数据进行输出outputStream.flush();outputStream.close();} catch (Exception e) {System.out.println(e.getMessage());}}
}

2.2 点击按钮显示或者刷新显示本地图片

前端代码:

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮来改变img标签src属性的值。</p>
<button onclick="myFunction()">试一下</button>
<img id="img" src="" width="200"/>
<script>
function myFunction(){$.ajax({type : 'GET',url :  '/readImg',success : function (){//请求成功,给照片处可以用下面的方法给src属性赋值document.getElementById("img").setAttribute("src", "http://127.0.0.1:8080/readImg");} });
}
</script>
</body>
</html>

java后端代码:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.OutputStream;@Controller
public class ShowLocalImg {@RequestMapping("/readImg")public void readImg1(HttpServletRequest request, HttpServletResponse response){FileInputStream in;try {request.setCharacterEncoding("utf-8");//页面img标签中src中传入的真是图片地址路径path = "D:\\img\\1.jpg";String filePathEcode=new String(path.trim().getBytes(), "UTF-8");response.setContentType("application/octet-stream;charset=UTF-8");//图片读取路径in=new FileInputStream(filePathEcode);// 得到文件大小int i=in.available();//创建存放文件内容的数组byte[]data=new byte[i];in.read(data);in.close();//把图片写出去OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());outputStream.write(data);//将缓存区的数据进行输出outputStream.flush();outputStream.close();} catch (Exception e) {System.out.println(e.getMessage());}}
}

如果想要显示指定名称的图片,可以增加一个输入框输入图片名称,在url中传入到后台
前端代码如下:

<!DOCTYPE html>
<html>
<body>
<input type="text" id="picName" placeholder="显示图片">
<button onclick="myFunction()">刷新图片</button>
<img id="img" src="" width="200"/>
<script>
function myFunction(){$.ajax({type : 'GET',url :  '/readImg?picName='+ $('#picName').val(),success : function (){//请求成功,给照片处可以用下面的方法给src属性赋值document.getElementById("img").setAttribute("src", "http://127.0.0.1:8080/readImg");} });
}
</script>
</body>
</html>

后台代码:

@RequestMapping("/readImg")public void readImg(String picName, HttpServletRequest request, HttpServletResponse response){FileInputStream in;try {request.setCharacterEncoding("utf-8");//页面img标签中src中传入的真是图片地址路径//String path = request.getParameter("barcode");path = "D:\\img\\"+picName+".jpg";String filePathEcode=new String(path.trim().getBytes(), "UTF-8");response.setContentType("application/octet-stream;charset=UTF-8");//图片读取路径in=new FileInputStream(filePathEcode);// 得到文件大小int i=in.available();//创建存放文件内容的数组byte[]data=new byte[i];in.read(data);in.close();//把图片写出去OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());outputStream.write(data);//将缓存区的数据进行输出outputStream.flush();outputStream.close();} catch (Exception e) {System.out.println(e.getMessage());}}

最终效果:
注意:由于在项目中使用了模板,所以input框和按钮显示会跟上述代码中有点不一样。
在这里插入图片描述


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

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

相关文章

了解Swarm 集群管理

Swarm 集群管理 简介 Docker Swarm 是 Docker 的集群管理工具。它将 Docker 主机池转变为单个虚拟 Docker 主机。 Docker Swarm 提供了标准的 Docker API&#xff0c;所有任何已经与 Docker 守护程序通信的工具都可以使用 Swarm 轻松地扩展到多个主机。 支持的工具包括但不限…

前端安全XSS和CSRF讲解

文章目录 XSSXSS攻击原理常见的攻击方式预防措施 CSRFCSRF攻击原理常见攻击情景预防措施&#xff1a; CSRF和XSS的区别 XSS 全称Cross Site Scripting&#xff0c;名为跨站脚本攻击。为啥不是单词第一个字母组合CSS&#xff0c;大概率与样式名称css进行区分。 XSS攻击原理 不…

框框大学之——教育技术学

清一色劝退的教育技术学。。。。。。 https://www.kkdaxue.com/?current1&major%E6%95%99%E8%82%B2%E6%8A%80%E6%9C%AF%E5%AD%A6&pageSize10&sortFieldcreateTime&sortOrderdescend 总结&#xff1a; 1 杂而不经 2 摆烂劝退居多 3 适合躺平 4 考公不行 5 要多…

python 将excel 多行进行分组合并

def exc():"""# 需要用到分组的概念:将角色和业务单据的进行分组,结果合并为一行"""df pd.read_excel(test33.xlsx)# 设置需要分组的字段cols [姓名, 科目]#agg() 其中的参数字段为之后输出的表格中的列字段df df.groupby(cols).agg({姓名: f…

在GitHub上管理和协作的完全指南

介绍 GitHub 是一个强大的版本控制和协作平台&#xff0c;它不仅可以帮助你管理和跟踪项目的变化&#xff0c;还可以与他人进行协作。本文将详细介绍如何使用 GitHub 的各种功能来管理和协作项目。 目录 注册GitHub账号创建和管理仓库 创建仓库添加和管理文件分支管理合并请…

Python数据容器——列表(list)

数据容器入门 Python中的数据容器&#xff1a; 一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素 每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 数据容器根据特点的不同&#xff0c;如&#xff1a;是否支持重复元…

Wordpress升级版本后插件和主题常见出错及处理方法整理【持续更新】

Wordpress报错怎么解决&#xff1f; 一般常用的排查方法&#xff1a; 暂时禁用所有插件&#xff1b;将主题更改为默认主题&#xff1b; 修改wp-config.php文件&#xff1b;更新固定链接设置&#xff0c;确保设置正确&#xff1b;检查.htaccess文件是否存在且是否可写&#xf…

QtAV for ubuntu16.04

下载ubuntu https://releases.ubuntu.com/16.04/ubuntu-16.04.7-desktop-amd64.iso 下载ffmpeg https://ffmpeg.org/download.html 下载QtAV https://github.com/wang-bin/QtAV/releases 更新 sudo apt update 安装库 sudo apt-get install libglu1-mesa-dev freeglut3-dev…

ETHERCAT转PROFIBUS连接到300plc的配置方法

由于捷米JM-DP-ECT&#xff0c;是自主研发的一款PROFIBUS从站功能的通讯网关&#xff0c;它的主要功能是将ETHERCAT设备接入到PROFIBUS网络中生产环境比较复杂有多个设备采用不同的协议这极大的阻碍了&#xff0c;各个设备的数据互通。 JM-DP-ECT这个小小的网关可不简单&#x…

SpringCloud项目打包注意事项以及可能出错的几种情况

SpringCloud项目打包注意事项和可能出错的几种情况 1、检查子模块中的 parent的pom文件路径 \<relativePath/\>2、检查打包插件的位置3、检查module是否重复引用 欢迎访问我的个人博客&#xff1a;https://wk-blog.vip 1、检查子模块中的 parent的pom文件路径 <relat…

Hive常见面试题

Hive的基本概念 什么是Hive&#xff1f;它的主要作用是什么&#xff1f; Hive是一个基于Hadoop生态系统的数据仓库和数据处理工具。 它提供了类似于SQL的查询语言&#xff08;HiveQL&#xff09;&#xff0c;使用户能够使用SQL语句来查询和分析 大规模存储在Hadoop集群上的数…

【计算机视觉|风格迁移】PP-GAN:使用GAN的地标提取器将韩国人像的风格转化为身份证照片

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;PP-GAN : Style Transfer from Korean Portraits to ID Photos Using Landmark Extractor with GAN 链接&#xff1a;[2306.13418] PP-GAN : Style Transfer from Korean Portraits to ID…

漫画 | TCP/IP之大明邮差

后记&#xff1a; 1973年&#xff0c;卡恩与瑟夫开发出了网络中最核心的两个协议&#xff1a;TCP协议和IP协议&#xff0c;随后为了验证两个协议的可用性&#xff0c;他们做了一个实验&#xff0c;在多个异构网络中进行数据传输&#xff0c;数据包在经过近10万公里的旅程后到达…

射影平面 与 射影变换

射影平面 与 射影变换 射影平面 与 齐次坐标 中心为O 的把 将与一个点O 关联的所有平面和直线构成的集合称为 中心为O的把O[\lambda, p]射影&#xff08;从平面\pi 到把O的一个对应关系&#xff09;O[P, l] [OP, OL] ...截影&#xff08;从把O 到平面\pi 的一个对应关系&…

laravel安装composer依赖

一.问题描述 拉取的新项目没有依赖 项目根目录没有vendor目录 报错 二.安装composer,拉取依赖 1.如果没有composer先去下载 官网地址:Packagist / Composer 中国全量镜像 我的博客安装composer:composer最新版本安装_荒-漠的博客-CSDN博客 2.进入项目根目录cmd或者在项目中…

【云原生】详细学习Docker-Swarm部署搭建和基本使用

个人主页&#xff1a;征服bug-CSDN博客 kubernetes专栏&#xff1a;云原生_征服bug的博客-CSDN博客 目录 Docker-Swarm编排 1.概述 2.docker swarm优点 3.节点类型 4.服务和任务 5.路由网格 6.实践Docker swarm 1.概述 Docker Swarm 是 Docker 的集群管理工具。它将 Doc…

PHP国外在线教育系统源码 在线课程系统源码 直播课程系统源码提供在线课程,现场课程,测验

Proacademy是在线教育一体化的解决方案&#xff0c;用于创建类似于Udemy、Skillshare、Coursera这种在线教育市场。 这个平台提供在线课程&#xff0c;现场课程&#xff0c;测验等等&#xff0c;并有一个基于实际业务需要的高级认证插件&#xff0c;程序基于Laravel强大的安全框…

全球公链进展| 2023/8/7

一周速览 过去一周&#xff0c;明星项目动态如下&#xff1a; 以太坊核心开发者共识会议决定推迟发布Devnet #8 BNB Chain 发布主网 v1.2.9 版本以及v1.2.10 版本 Arbitrum 已在主网激活对账户抽象端点的支持 Sui 主网升级至 V1.6.3 版本 Aptos 推出 Move v1.4 和 v1.5 …

MySQL 表约束超详细

目录 一. 主键约束——PRIMARY KEY 1.在建表时设置主键约束 设置单字段主键 设置联合主键 2. 在修改表的时候添加主键约束 3. 删除主键约束 4. 【补充】 MySQL设置主键自增长 &#xff1a; 二. 外键约束——FOREIGN KEY 1.在创建表时设置外键约束 2. 在修改表时添加外…

【排序算法略解】(十种排序的稳定性,时间复杂度以及实现思想)(含代码)(完工于2023.8.3)

文章目录 1、冒泡排序/选择排序/插入排序冒泡排序(Bubble Sort)选择排序(Selection Sort)插入排序(Insertion Sort) 2、希尔排序(Shells Sort)3、快速排序(Quick Sort)4、堆排序(Heap Sort)5、归并排序(Merge Sort)6、桶排序/计数排序/基数排序桶排序(Bucket sort)计数排序(Cou…