elementUI中上传图片保存为base64，如何回显？

Question

开始用el-upload组件上传图片，图片用base64保存在数据库，再次编辑的时候如何回显图片

Answer 1

直接src属性,或background:url()赋值就行

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABsSFBcUERsXFhceHBsgKEIrKCUlKFE6PTBCYFVlZF9VXVtqeJmBanGQc1tdhbWGkJ6jq62rZ4C8ybqmx5moq6T/2wBDARweHigjKE4rK06kbl1upKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT/wAARCAA1ADgDASIAAhEBAxEB/8QAGgAAAwADAQAAAAAAAAAAAAAAAAMEAQIFBv/EAC4QAAIBAwIFAgUEAwAAAAAAAAECAwAEERIhMUFRYXEFExQVIiOhJIGRwTNCcv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A9LU8tzDEQskscZI2DMAaZgZHjPQV5wTRRzTrNbma9ZyAHXUoA4YPLag773VvEuppkAIzksKR83sM7XSHwCaxDY23trJ8IgkIzpO4GfNVCCNdhCgHZRQLjvLeRWZJ0KrxOobH96bFPFKMJIj/APLA0mSxtXXDQRk5zuuxPfrXIuoisggW2Rbot9uSEaFXyefig9FRS4g4iQSHLgDVjrRQKu5Bb28s22UUkDpUvpFmsdqk8iq00g1liOu9VXMAlt5ISQFdSGJ471N6XcarcW8v0zwAI643GOBHbFBteXN1C4EdurAnGpmwB3rS1ur6bWGt410nAfV9LeKfcSyKwAMaq3Mgn8VpLNIpBheErjJ1ZBHgCohNr8xknL3De0mr/HpBGPPHPeqL+3+ItyinEi/UjZzpYbg0W4MgR2l1ZydkKg/saqIxjHXfvVUmxuPibWOU7MRhh0I2P5oqb0r7b3cXJZyR2BAOKKDpYBrjvbrfeoSyBmj9jCK68dXP+q6zuERmPBQT/Fcr0+4itrOJ5XAM5eUk89+P8YoL4oGESiV/cdf9iMZrWW0WQghpE66HIz5H98aZbTe/CkmgpqGcE7inUC4o1jQKgwBwrJIJHMDvzqS9ubiF09qBpVOQQvHPLPQd6ZZwtBbqsjapN2dupJyaBHp5/WX3T3QPxRR6WNVvLMQR7szuAehOB+BRQXSKHRlPAgikJZQJFFEyBxGBpLDOKKKCnTgDFZoooNdscKyAGG9FFBgALsOlFFFB/9k=" alt="">

Answer 2

同样可以回显。

只不过不知道你在数据库保存的时候有没有前缀 data:image/jpg;base64。而且看你是什么操作，我记得是有个 fileList 还是什么的东西

Answer 3

最近做到类似的需求了，我的场景是 将剪切板中的图放到页面中回显，恰好剪切板中存放的图片格式也是 Base64.

---

下面是解决方案

---

通过和后端协商好，上传之前的 Base64 格式，约定好格式后，就是前端接收后端返回的数据，然后按照 前后的数据约束 就行 动态拼接数据 放到 <img :src="变量"> 中 即可，就可以回显数据了。