Question

我正试图创建一个投资组合网站，以便可以使用自己的REST API编辑所有投资组合项目。考虑到这一点，我已经在数据库中的Skills表下存储了8张图像，该表的外键为user_id。

每当我显示技能的Thymeleaf页面时，我不会得到图像，而是收到卸载的图像，并且该图像显示在我的视图页面源“ [B @ 6e8a976f””中。

我尝试将其转换为Base64，但一直收到nullpointer异常。

User.java

@Entity
public class User {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private long id;

  private String firstName;

  private String lastName;

  private String username;

  private String email;

  private String phoneNumber;


  @OneToOne
  private Demographic demographic;

  @OneToOne
  private Resume resume;

  @OneToMany(mappedBy = "user", cascade = CascadeType.ALL, fetch = FetchType.LAZY)
  @JsonIgnore
  private List<Skills> userSkills;

  public User() {
  }
  ... getters/setters
}

Skills.java

@Entity
public class Skills {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private long id;

  private String techName;
  private byte[] logo;

  @ManyToOne
  @JoinColumn(name = "user_id")
  private User user   ;

  public Skills() {
  }
  ... getters/setters
}

HomeController

@Controller
@RequestMapping("/")
public class HomeController {

  @Autowired
  private UserService userService;

  @Autowired
  private SkillsService skillsService;


  @RequestMapping("/home")
  public String showHome() {
      return "index";
  }

  @RequestMapping("/portfolio")
  public String showPortfolio() {
      return "portfolio";
  }

  @GetMapping(value = "/technology")
  public String technologyList(Model theModel, Skills skills) {
      User user = userService.findByUsername("wmangram");
      List<Skills> userSkillsList = skillsService.findSkillList("wmangram");

      theModel.addAttribute("userSkills", userSkillsList);

      return "technology";
  }

  @RequestMapping("/resume")
  public String showResume() {
      return "resume";
  }

}

skills.html

<tbody>                                      
  <tr th:if="${userSkills.empty}">                                           
     <td colspan="2"> No Skills Available </td>                                      
  </tr>                                      
  <tr th:each="skills : ${userSkills}">                                          
     <td><span th:text="${skills.techName}"></span></td>                                             
     <td><img th:src="${skills.logo}"/></span></td>                                      
  </tr>                                  
</tbody>

更新

@GetMapping(value = "/technology")
public String technologyList(Model theModel, Skills skills) throws IOException {
    User user = userService.findByUsername("wmangram");
    List<Skills> userSkillsList = skillsService.findSkillList("wmangram");

    byte[] encodeBase64 = Base64.encodeBase64String(skillsService.findLogos());
    String base64Encoded = new String(encodeBase64, "UTF-8");
    ModelAndView.addObject("userImage", base64Encoded );

    theModel.addAttribute("userSkills", userSkillsList);

    return "technology";
}

SkillService.java

public interface SkillsService {
  List<Skills> findSkillList(String wmangram);

  byte[] findLogos();


}

SkillServiceImpl.java

public byte[] findLogos() {
    return skillsDao.findLogos();
}

CustomerSkillsDao.java

@Repository
public interface CustomSkillsDao {

@Query("SELECT logo from portfolio.skills")
byte[] findLogos();
}

更新2 家用控制器

List<byte[]> logo = skillsService.findLogos();
    List<String> base64List = new ArrayList<>();

    for (int i = 0; i < logo.size(); i++) {
        byte[] encodeBase64 = Base64.encodeBase64(logo.get(i));
        String base64Encoded = new String(encodeBase64, "UTF-8");
        base64List.add(base64Encoded);
    }

    theModel.addAttribute("userSkills", userSkillsList);
    for (int j = 0; j < base64List.size(); j++) {
        theModel.addAttribute("userImage", base64List.get(j));
        System.out.println("\\\nThis is the base64 called for: " + base64List.get(j));
    }
// All the base64List.get(j) in the sysout prints different base64 values so 
// I wouldn't imagine that this should be causing an issue 
// unless there is something I'm missing

Answer 1

注意：如果图像较小，否则将其暴露在端点上，则此方法适用。

- (void)setVolume:(int)volume {
    NSString *command = [NSString stringWithFormat:@"player.setVolume(%d);", volume];
    NSLog(@"%@",command); // for debugging
    [self stringFromEvaluatingJavaScript:command];

    #import <MediaPlayer/MediaPlayer.h> // JUST MAKE SURE THIS IS IMPORTED
    musicPlayer = [MPMusicPlayerController applicationMusicPlayer];
    musicPlayer.volume = volume; // min volume (mute)
}

在JSP页面上： @RequestMapping(value = "/image/{imageid}", method = RequestMethod.GET) public String image(Model model,@PathVariable int imageid) throws UnsupportedEncodingException { String encodeBase64 = convertBinImageToString(imagedao.getObject(imageid).getImage()); String photoencodeBase64 = new String(encodeBase64); model.addAttribute("image", photoencodeBase64); return "imageview"; } public static String convertBinImageToString(byte[] binImage) { if(binImage!=null && binImage.length>0) { return Base64.getEncoder().encodeToString(binImage); } else return ""; }

Answer 2

如果尚未将其转换为base64，则需要将其转换为<img src="data:image/jpg;base64, [your byte array]">。

以下转换后应该可以使用。

onScroll

通过MySQL / Hibernate返回的对象列表在Thymeleaf上显示图像

2 个答案: