java的ssm框架后端，前段vue上传图片保存到mysql并提取在前端展示

Question

如何将上图的图片数据在vue前端展示出来
图片数据包含在返回值的data中

自己写的代码但是图片不能显示不知道什么原因求指点

imgurl打印的显示

Answer 1

引自免费微信小程序：皆我百晓生

首先，确保你在服务器端已经正确地处理了图片文件，并将其作为二进制数据存储到了MySQL数据库中。对于SSM（Spring Boot + Spring MVC + MyBatis）框架，你需要创建一个RESTful API接口，用于从数据库获取图片的二进制数据。

在Java后端，你需要创建一个Controller方法来提供图片数据。这里是一个简单的例子：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.sql.Blob;
import java.sql.ResultSet;
import java.sql.SQLException;

@RestController
public class ImageController {

    @Autowired
    private YourMapper yourMapper; // 假设这是你的MyBatis映射器

    @GetMapping("/image/{id}")
    public ResponseEntity<byte[]> getImage(@PathVariable Long id) throws SQLException {
        ResultSet resultSet = yourMapper.getImageById(id);
        if (resultSet.next()) {
            Blob blob = resultSet.getBlob("chetupian");
            byte[] imageData = blob.getBytes(1, (int) blob.length());
            
            BufferedImage bufferedImage = ImageIO.read(new ByteArrayInputStream(imageData));
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            ImageIO.write(bufferedImage, "jpg", outputStream);
            return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(outputStream.toByteArray());
        } else {
            throw new ResourceNotFoundException("Image not found with ID: " + id);
        }
    }
}

这段代码中，yourMapper.getImageById(id) 是一个从数据库查询图片的方法，具体实现依赖于你的MyBatis配置。

接下来，在Vue.js前端，你需要调用这个API来获取图片数据，然后设置为<img>标签的src属性。可以使用axios库来发送HTTP请求：

首先安装axios库（如果你还没有安装的话）：

npm install axios

然后在Vue组件中使用它：

<template>
  <div>
    <img :src="imageUrl" alt="Uploaded Image">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    async loadImage(id) {
      try {
        const response = await axios.get(`/api/image/${id}`);
        this.imageUrl = window.URL.createObjectURL(new Blob([response.data], { type: 'image/jpeg' }));
      } catch (error) {
        console.error('Error loading image:', error);
      }
    },
  },
  mounted() {
    // 假设你想加载id为1104的图片
    this.loadImage(1104);
  },
};
</script>

在这个Vue组件中，我们定义了一个loadImage方法，它会异步地调用 /api/image/:id 这个URL来获取图片数据。然后，我们使用 window.URL.createObjectURL() 方法将二进制数据转换为一个可访问的URL，最后把这个URL赋给<img>标签的src属性。

这样，你应该能够在页面上看到从数据库中获取的图片了。注意，这里的示例是针对JPEG格式的图片，如果图片是其他格式，你需要相应地调整ImageIO.write()方法中的参数。