el-image展示多张图片时 个别图片回显跨域
时间: 2023-10-05 10:14:50 浏览: 103
如果在使用 el-image 展示多张图片时,只有个别图片无法正常回显,很有可能是因为这些图片跨域了,而其他图片没有跨域。
一种解决方法是在后端服务中设置 Access-Control-Allow-Origin 头部,允许前端跨域访问。另一种方法是将图片转换为 base64 编码,然后在前端使用 data URL 的方式展示图片,这样就不会存在跨域问题了。
如果以上两种方法不可行,可以使用图片代理技术,即通过后端代理将图片请求转发到目标服务器上,然后再将图片返回给前端。这种方法虽然可以解决跨域问题,但是会增加服务器的负担,需要谨慎使用。
相关问题
el-image图片回显跨域
el-image 组件默认情况下是支持跨域图片的,但是需要后端服务在响应请求时设置 Access-Control-Allow-Origin 头部,允许前端跨域访问。
如果后端服务已经设置了正确的响应头,但 el-image 组件仍然无法正常显示图片,可能是因为浏览器的安全策略限制了跨域请求。此时可以尝试使用代理服务器进行图片请求,或者在图片 URL 后添加 ?imageMogr2/auto-orient 做图片转换处理,一般可以绕过浏览器的安全策略。
el-upload上传多张图片回显
以下是使用el-upload上传多张图片并回显的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:multiple="true"
:limit="3"
:file-list="fileList"
list-type="picture-card"
:auto-upload="false"
>
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后的回调函数
// 在这里可以处理回显逻辑
console.log(response); // 服务器返回的数据
console.log(file); // 当前上传的文件对象
console.log(fileList); // 已上传的文件列表
}
}
};
</script>
```
在上述代码中,我们使用了`el-upload`组件来实现文件上传功能。其中,`action`属性指定了上传文件的接口地址,`on-success`属性指定了上传成功后的回调函数。通过在回调函数中处理回显逻辑,可以实现上传多张图片并进行回显。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)