一、问题的背景

二、常见问题及解决方案

1. 静态资源URL解析问题

解决方案：

    使用require引入：

    const imgSrc = require('../../assets/images/panda.png');

    在模板中使用：

    <img :src="imgSrc"></img>

    使用import引入：

    import tile from "./assets/tile.jpg";

    在模板中使用：

    <img :src="tile" alt=""></img>

  • const imgSrc = '/assets/tile.jpg';

    在模板中使用：

    <img :src="imgSrc" alt=""></img>

2. 二进制数据流显示问题

解决方案：

  • 使用blob生成临时URL： 
    
fetch('api/get-image').then(response => response.blob()).then(blob => {
const imgSrc = URL.createObjectURL(blob);
this.imgSrc = imgSrc;
});
    在模板中使用： 
    
<img :src="imgSrc" alt=""></img>

3. 验证码图片加载问题

解决方案：

    后端生成验证码： 使用Java WebServlet生成验证码并返回二进制流。

    @.WebServlet("/captcha")
public class CaptchaServlet extends HttpServlet {
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      // 生成验证码逻辑
      BufferedImage image = createCaptcha();
      ByteArrayOutputStream baos = new ByteArrayOutputStream();
      ImageIO.write(image, "png", baos);
      byte[] imageData = baos.toByteArray();
      response.setContentType("image/png");
      response.getOutputStream().write(imageData);
  }
}

    前端使用Axios请求并显示： “`javascript import axios from ‘axios’;

methods: {

loadCaptcha() {
  axios.get('/captcha', { responseType: 'blob' }).then(response => {
    const imgSrc = URL.createObjectURL(response.data);
    this.captchaSrc = imgSrc;
  });
}

}

  在模板中使用：
  ```html
  <img :src="captchaSrc" @click="loadCaptcha" alt="验证码"></img>

4. 二进制转图片显示问题

解决方案：

  • 解码并生成图片URL： 
    
this.filePath = 'data:image/jpeg;base,' + row.imageBlob;
    在模板中使用： 
    
<img :src="filePath" alt=""></img>

三、高级技巧

1. 使用Vite处理静态资源

const imgSrc = new URL('./assets/panda.png', import.meta.url).href;

2. 图片下载功能

methods: {
  downloadImage(url) {
    const link = document.createElement('a');
    link.href = url;
    link.download = 'image.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

四、总结