美文网首页Vue专题
vue 获取服务端base64位图片之后的处理

vue 获取服务端base64位图片之后的处理

作者: wfaceboss | 来源:发表于2019-06-11 16:56 被阅读0次

    关于vue中img无法展示base64位图片的原因分析:
    (1)返回不是base64位数据,这个不用多说。
    (2)若服务端返回的确实是base64位数据,详细检查一下是否符合规范的base64格式

    一次经历,服务端确实返回了base64位的数据如下:

    /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFQ==
    

    乍一看还真是base64位数据,值也给到了imgsrc属性中,但是为啥还是不正常显示呢?
    其实上述这个并不是标准的base64格式,标准的格式应该是这样的:data:image/png;base64,开头+服务端返回的数据,这样就可以了。标准如下:

    data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjItRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er==
    

    拼接示例如下:
    realBase64='data:image/png;base64,'+data.FileForBase64;

    点赞是最好的支持,关注是最大的鼓励。亲爱的朋友,很荣幸在简书遇到您,若有疑问,欢迎探讨~~~。

    相关文章

      网友评论

        本文标题:vue 获取服务端base64位图片之后的处理

        本文链接:https://www.haomeiwen.com/subject/rlnqfctx.html