关于#java#的问题:Dao Service Controller层 前端代码如下,为什么页面显示的是十六进制数据

mysql使用blob存储图片,java实体类private byte[] image;Dao Service Controller层 前端代码如下,为什么页面显示的是十六进制数据,怎么才可以正确显示图片?Java 的实体类是要使用String image吗?
mysql

img


DAO层

public interface CommodityDao {

    @Select("select * from commodity")
    List selectAll();
}

Service层

public class CommodityServiceImpl implements CommodityService {

    @Autowired
    private CommodityDao commodityDao;

    @Override
    public List<Commodity> selectAll() {
        return commodityDao.selectAll();
    }
}

Controller层

@RestController
@RequestMapping("/merchant")
public class CommodityController {

    @Autowired
    private CommodityService commodityService;

    @GetMapping("/selectAll")
    public Result selectAll(){
        List commodities = commodityService.selectAll();
        int code  = commodities != null ? Code.SELECT_OK:Code.SELECT_ERR;
        String msg = commodities != null ? "数据查询成功":"数据查询失败,请重试";
        return new Result(code,commodities,msg);
    }
}

前端

"image"
                label="图片">
            "width: 100px; height: 100px"
                    :src="url"
                    :fit="fit">
            
        




selectAll(){
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/merchant/selectAll"
                }).then(function (resp) {
                    _this.commodity = resp.data.data;
                    let blob = new window.Blob([resp.data.data.image]);
                    let url = window.URL.createObjectURL(blob);
                    _this.commodity.image.url = url;
                })
            }

页面显示结果

img

可以参考这篇文章:https://juejin.cn/post/6844903783533658119

  • 这是图片的base64位编码吧 , img标签 可以用如下展示
<!-- /9j/4AAA  为 你的图片base编码 -->
<img src= "data:image/png;base64,/9j/4AAA">

  • 不建议这种直接存图片base64编码的方式,你可以存个图片相对路径到数据库中,代码读取时,根据相对路径 到指定路径下取图片文件,回传给前台