圖片轉base64格式加前綴

後端返回一大串的字符串,需要前端自己轉成圖片

注意點:"data:image/png;base64,"

this.state = {
	backImg: ""
}
this.imgsrc="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"


this.setState({
	backImg: "data:image/png;base64,"+this.imgsrc
})
<img src={this.state.backImg}/>

如圖:在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章