base64的图片地址为什么可以显示图片
时间: 2023-08-20 14:05:23 浏览: 41
base64是一种编码方式,可以将二进制数据转换为可打印的 ASCII 字符串。在网页中,可以通过将图片的二进制数据转换为 base64 编码,并将其作为 data URI(统一资源标识符)嵌入到 HTML 或 CSS 中来显示图片。
data URI 的格式如下:
data:[<mediatype>][;base64],<data>
其中,<mediatype> 表示媒体类型,如 image/jpeg,image/png 等;<data> 表示经过 base64 编码的图片数据。
通过这种方式,浏览器可以直接解析 data URI 中的图片数据,并将其显示在网页上,而不需要发送额外的请求去获取图片文件。这种方式适用于一些小型的、不需要频繁请求的图片。但是由于 base64 编码会导致数据变大约 1.33 倍,因此对于大型图片或者需要频繁请求的情况,不适合使用 base64 编码来显示图片。
相关问题
base64 字节数组转换为url显示图片
将 Base64 编码的字节数组转换为 URL 显示的图片,需要进行以下步骤:
1. 将 Base64 编码的字节数组转换为字符串。
2. 将字符串中的 '+', '/', '=' 字符替换为 URL 安全的字符。
3. 将字符串转换为 URL。
下面是 Java 代码示例:
```java
import java.util.Base64;
import java.net.URLEncoder;
public class Base64ToImageUrl {
public static void main(String[] args) {
byte[] imageBytes = ...; // Base64 编码的字节数组
// 将字节数组转换为字符串
String imageString = Base64.getEncoder().encodeToString(imageBytes);
// 将字符串中的 '+', '/', '=' 字符替换为 URL 安全的字符
imageString = imageString.replace("+", "-").replace("/", "_").replace("=", "");
// 将字符串转换为 URL
String imageUrl = "data:image/png;base64," + imageString;
try {
imageUrl = URLEncoder.encode(imageUrl, "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
System.out.println(imageUrl);
}
}
```
其中,最后生成的 `imageUrl` 即为可在 URL 中显示的图片地址。
Thymeleaf显示base64字符串为图片
要在Thymeleaf中将Base64字符串显示为图片,可以使用以下步骤:
1. 在HTML文件中添加以下代码:
```html
<img th:src="@{'data:image/png;base64,' + ${base64String}}" />
```
其中,`base64String`是你要显示的Base64字符串。
2. 确保将`thymeleaf-extras-springsecurity5`依赖项添加到项目中。这是因为在显示Base64字符串时,需要使用Spring Security对数据进行转义。
3. 在Spring Security配置文件中添加以下代码:
```java
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.headers().frameOptions().disable();
http.csrf().disable();
http.authorizeRequests().antMatchers("/h2-console/**").permitAll();
}
@Bean
public BCryptPasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
@Bean
public SpringSecurityDialect springSecurityDialect() {
return new SpringSecurityDialect();
}
}
```
这将禁用Spring Security的CSRF保护和X-Frame-Options,以便在浏览器中正确显示图片。
4. 在application.properties文件中添加以下代码:
```properties
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
```
这将确保Thymeleaf正确地解析HTML文件并显示Base64字符串作为图片。
完成以上步骤后,在Thymeleaf中就可以将Base64字符串显示为图片了。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)