在Java后端中，可以使用Java的File类和ImageIO类读取本地
图片，然后将
图片以流的形式返回。在Layui前端中，可以使用Ajax技术向Java后端发送请求，然后将返回的
图片流显示在页面上。以下是示例代码：
Java后端代码：
```java
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class ImageController {
@RequestMapping(value = "/image", method = RequestMethod.GET, produces = "image/
jpeg")
@ResponseBody
public byte[] getImageAsBytes(@RequestParam("name") String imageName) throws IOException {
Resource resource = new ClassPathResource("images/" + imageName);
File file = resource.getFile();
BufferedImage bufferedImage = ImageIO.read(file);
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
ImageIO.write(bufferedImage, "jpg", byteArrayOutputStream);
return byteArrayOutputStream.toByteArray();
}
}
```
在这个示例中，我们使用了Spring框架的`@Controller`注解和`@RequestMapping`注解，以便在URL路径中接收
图片的名称。`@ResponseBody`注解告诉Spring将返回的字节数组转换成HTTP响应。我们使用Spring的`Resource`类和`ClassPathResource`类来加载本地
图片，然后使用和之前示例一样的方式将其转换成字节数组返回。注意，这个示例中我们将
图片放在了`src/main/resources/images`目录下。
前端代码：
```html
<!DOCTYPE html>
<html>
<head>
<
meta charset="UTF-8">
<title>显示
图片</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
</head>
<body>
<img id="image" src="" alt="
图片">
<script type="text/javascript">
$(function() {
var imageName = "myimage.jpg"; //
图片名称
var url = "/image?name=" + imageName; // 请求
图片的URL
$.ajax({
type: "GET",
url: url,
success: function(
data) {
var blob = new Blob([
data], {type: "image/
jpeg"}); // 将字节数组转换成Blob对象
var objectUrl = URL.createObjectURL(blob); // 创建URL对象
$("#image").attr("src", objectUrl); // 在页面上显示
图片
},
error: function() {
layer.msg("
获取图片失败");
}
});
});
</script>
</body>
</html>
```
这个示例中，我们使用了jQuery和Layer插件。在页面加载完成后，使用Ajax向Java后端发送请求，
获取图片流并将其显示在页面上。注意，这个示例中的
图片名称是硬编码的，你需要根据实际情况修改代码来适应你的应用。
1万+
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
