img标签展示base64图片
时间: 2023-05-19 15:04:49 浏览: 107
可以使用以下代码来展示base64图片:
```html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="base64 image">
```
其中,`data:image/png;base64`表示图片的格式,`iVBORw0KGgoAAAANSUhEUgAAADIA...`是base64编码后的图片数据。将这两部分拼接在一起,就可以展示base64图片了。
相关问题
uniapp如何展示base64图片
在uniapp中展示base64图片可以使用以下两种方法:
1. 使用image标签,将base64字符串作为src属性的值,如下所示:
```html
<template>
<div>
<img :src="base64Img" />
</div>
</template>
<script>
export default {
data() {
return {
base64Img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...',
};
},
};
</script>
```
2. 使用background-image样式,将base64字符串作为url的值,如下所示:
```html
<template>
<div class="img-container"></div>
</template>
<style>
.img-container {
width: 100px;
height: 100px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
background-size: cover;
}
</style>
```
base64图片展示
当您将图片编码为Base64字符串后,您可以使用HTML或CSS来展示该图片。以下是HTML和CSS代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Base64图片展示</title>
</head>
<body>
<img src="data:image/jpeg;base64,<base64字符串>" alt="图片">
</body>
</html>
```
请将`<base64字符串>`替换为您要展示的实际Base64字符串。
另外,您还可以使用CSS来设置图片的样式,例如调整大小、边框等。下面是一个示例:
CSS代码:
```css
img {
width: 300px;
border: 1px solid black;
}
```
您可以将上述CSS代码添加到`<style>`标签中,或者将其保存为单独的CSS文件,并在HTML中引用该文件。
希望这能帮助到您展示Base64编码的图片!如果有任何疑问,请随时向我提问。