Java+Vaadin应用内图片链接无法显示，但新标签页可正常打开的问题

你的情况大概率是**跨域资源共享(CORS)或者Vaadin的内容安全策略(CSP)**限制导致的，以下是具体排查和解决步骤：

1. 检查浏览器控制台错误 #

打开Chrome开发者工具（F12）切换到Console标签，看是否有类似No 'Access-Control-Allow-Origin' header is present on the requested resource的CORS报错，或者CSP相关的加载阻止提示。这是最直接的问题定位方式。

2. 处理CORS限制 #

如果是CORS错误，说明图片服务器设置了策略，禁止外部网站直接嵌入该图片：

• 如果你能控制图片服务器，在服务器配置里添加你的应用域名到Access-Control-Allow-Origin允许列表；
• 无法控制的话，在你的Java后端写一个代理接口，后端请求图片资源再返回给前端，比如：

  @GetMapping("/proxy-image")
  public ResponseEntity<byte[]> proxyImage() throws IOException {
      URL url = new URL("https://media.reaperscans.com/file/4SRBHm/comics/14659ab2-5650-4aaf-a5bb-9ad5a9828662/chapters/3aff6399-5ff4-46d1-b502-88788510d962/000.jpg");
      HttpURLConnection conn = (HttpURLConnection) url.openConnection();
      conn.setRequestMethod("GET");
      byte[] imageBytes = IOUtils.toByteArray(conn.getInputStream());
      String contentType = conn.getContentType();
      return ResponseEntity.ok().contentType(MediaType.parseMediaType(contentType)).body(imageBytes);
  }
  

  然后Vaadin里改用代理地址：

  add(new Image("/proxy-image", "Comic image"));
  

3. 配置Vaadin的CSP策略 #

如果是CSP阻止了图片加载，需要在应用配置里允许该图片域名：

• 在Spring Boot项目的application.properties中添加：

  vaadin.content-security-policy=default-src 'self'; img-src 'self' https://media.reaperscans.com;
  

• 或者在VaadinServlet的初始化方法中设置：

  @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
  @VaadinServletConfiguration(ui = MainView.class, productionMode = false)
  public static class MyUIServlet extends VaadinServlet {
      @Override
      protected void servletInitialized() throws ServletException {
          super.servletInitialized();
          getService().setContentSecurityPolicy("default-src 'self'; img-src 'self' https://media.reaperscans.com;");
      }
  }
  

4. 基础排查步骤 #

• 先测试本地图片：把一张图片放到src/main/resources/META-INF/resources/images/下，用new Image("images/test.jpg", "Test")添加到布局，看是否能正常显示，排除Vaadin组件本身的使用问题；
• 清除浏览器缓存，强制刷新页面（Ctrl+F5），避免缓存导致的加载异常；
• 给Image组件设置非空的alt属性，虽然不影响加载，但有助于排查和无障碍优化。

内容的提问来源于stack exchange，提问作者Michael Kročka