前端base64转图片并显示
时间: 2023-08-02 10:06:22 浏览: 1240
你可以使用JavaScript的atob()函数将Base64编码转换为二进制数据,然后将其转换为Blob对象,并创建一个URL,将其赋值给Image对象的src属性来显示图片。以下是一个示例代码:
HTML:
```
<img id="myImage" />
```
JavaScript:
```javascript
// Base64编码的图片数据
var base64Image = "data:image/png;base64,iVBORw0KG...";
// 将Base64编码转换为二进制数据
var binaryImage = atob(base64Image.split(',')[1]);
// 将二进制数据转换为Blob对象
var blobImage = new Blob([new Uint8Array(binaryImage)], {type: 'image/png'});
// 创建URL
var imageUrl = URL.createObjectURL(blobImage);
// 显示图片
document.getElementById("myImage").src = imageUrl;
```
这将在页面上显示一个Base64编码为PNG格式的图片。注意,如果您想在页面上显示多个Base64编码的图片,最好使用一个单独的函数来处理它们,以避免重复的代码。
相关问题
base64转图片前端显示
将base64转换为图片并在前端显示,可以使用以下步骤:
1. 创建一个Image对象。
2. 将base64编码的图片数据赋值给Image对象的src属性。
3. 在Image对象的onload事件中,将Image对象添加到DOM中。
以下是一个示例代码:
```javascript
const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KG...'; // 这里是base64编码的图片数据
img.onload = () => {
document.body.appendChild(img); // 将Image对象添加到DOM中
};
```
前端base64图片显示
前端可以通过CSS的方式将base64编码图片显示出来。可以在CSS中定义一个div元素,并设置其宽度、高度以及背景图像属性,将base64编码的图片作为背景图像进行显示。具体代码如下所示:
```css
div.image {
width: 99px;
height: 42px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
}
```
其中,背景图像的URL需要将前缀(data:image/png;base64,)和base64编码的字符串进行拼接,如下所示:
```html
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......
```
将以上代码添加到前端页面中,div元素即可显示出base64编码的图片。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [base64编码显示图片](https://blog.csdn.net/weixin_46724562/article/details/116639768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]