读取数据库图片路径并前端显示

注:

Tomcat服务器只能识别到你的项目之下的目录,所以绝对路径不能使用。

如:我图片保存在Tomcat的webapp下Person项目中Autoplayimages中,然后保存路径见图。

 

把图片路径置为request.getContextPath()+相对路径。

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="cn.personweb.Dao.*" %>    
    <%
    	String[] arry=new String[5];
    	AutoplayDao.getAutoplayUrl(arry);
    %>
<center>
	<div class="demo">
	<a class="control prev"></a><a class="control next abs"></a>
	<div class="slider">
		<ul>
			<li><a href=""><img src="<%=request.getContextPath()%>/<%=arry[0]%>" alt="两弯似蹙非蹙笼烟眉,一双似喜非喜含情目。" /></a></li>
			<li><a href=""><img src="<%=request.getContextPath()%>/<%=arry[1]%>" alt="态生两靥之愁,娇袭一身之病。" /></a></li>
			<li><a href=""><img src="<%=request.getContextPath()%>/<%=arry[2]%>" alt="泪光点点,娇喘微微。" /></a></li>
			<li><a href=""><img src="<%=request.getContextPath()%>/<%=arry[3]%>" alt="闲静似娇花照水,行动如弱柳扶风。" /></a></li>
			<li><a href=""><img src="<%=request.getContextPath()%>/<%=arry[4]%>" alt="心较比干多一窍,病如西子胜三分。" /></a></li>
		</ul>
	</div>
</div>
</center>

 

 

 

 

 

  • 8
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,在数据库存储图片路径需要在后端进行操作。可以将图片存储在服务器上的某个文件夹,并在数据库存储该图片路径,例如存储在路径为`/images`的文件夹,则可以将图片路径存储为`/images/xxx.jpg`。 接下来,后端可以通过接口将存储在数据库图片路径返回给前端。在Spring Boot,可以使用`@RestController`注解定义一个RESTful接口,使用`@GetMapping`注解定义一个GET请求的接口,然后使用`ResponseEntity`将图片返回给前端,例如: ```java @RestController public class ImageController { @GetMapping("/image/{id}") public ResponseEntity<byte[]> getImage(@PathVariable("id") Long id) throws IOException { // 根据id从数据库获取图片路径 String imagePath = getImagePathById(id); // 读取图片文件 File file = new File(imagePath); FileInputStream input = new FileInputStream(file); byte[] bytes = new byte[input.available()]; input.read(bytes); input.close(); // 设置HTTP响应头 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_JPEG); // 返回图片数据 return new ResponseEntity<>(bytes, headers, HttpStatus.OK); } // 根据id从数据库获取图片路径的实现代码 private String getImagePathById(Long id) { // ... } } ``` 在Vue前端,可以使用`<img>`标签来显示图片。在`src`属性设置图片的URL,即可从后端获取图片显示,例如: ```html <template> <div> <img :src="imageSrc" alt="image"> </div> </template> <script> export default { data() { return { imageSrc: '' } }, mounted() { this.loadImage() }, methods: { loadImage() { // 发送GET请求获取图片数据 axios.get('/image/1', { responseType: 'arraybuffer' }).then(response => { // 将图片数据转换为Base64编码的字符串 let base64Str = btoa( new Uint8Array(response.data) .reduce((data, byte) => data + String.fromCharCode(byte), '') ) // 设置图片的URL this.imageSrc = 'data:image/jpeg;base64,' + base64Str }) } } } </script> ``` 这样,前端就可以从后端获取存储在数据库图片显示了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值