wordpress三栏模板,网站建设优化教程,做宣传手册的网站,dw如何建设网站摘要#xff1a;做Vueelement ui项目的时候#xff0c;发现使用element ui的upload上传图片时#xff0c;不显示的问题。我项目的图片是上传到七牛云#xff0c;长传成功后返回存储在七牛云中的地址。后面发现是因为返回的地址是外部地址#xff0c;需要完整的URL#xf…摘要做Vueelement ui项目的时候发现使用element ui的upload上传图片时不显示的问题。我项目的图片是上传到七牛云长传成功后返回存储在七牛云中的地址。后面发现是因为返回的地址是外部地址需要完整的URL不然会被视为本地的绝对路径.解决方法是在链接前面加上 http:// 可直接选择在后端处理拼接减小前端修改代码次数。 1.问题描述
前端代码
el-uploadclassavatar-uploadernameimg:actionuploadURL:headersMyHeader:show-file-listfalse:on-successhandleAvatarSuccess:before-uploadbeforeAvatarUploadimg v-ifuserInfoObj.avatar :srcuserInfoObj.avatar :onerror$store.state.errorImg classavatari v-else classel-icon-plus avatar-uploader-icon/idiv slottip classel-upload__tip点击上传头像只能上传jpg/png文件且不超过1mb/div
/el-upload
前端请求示例 只上传一张图片。
后端返回结果 将data中的链接直接用浏览器访问是可以查看到图片。但项目页面图片不显示如下图 对页面元素进行检查发现好像地址没问题 可为啥就是访问不了呢接下来直接复制没显示图片的地址看它是否有问题选中未显示图片鼠标右键复制图片地址。
图片地址 注意看发现图片真正请求时竟然加上了本地域名localhost, 难怪访问不到图片图片url被错误拼接了。
2.解决方法
因为返回的地址是外部地址需要完整的URL不然会被视为本地的绝对路径.
解决方法是在链接前面加上 http:// 可直接选择在后端处理拼接减小前端修改代码次数。
方法1:前端访问时img src属性加上http// 方法2后端地址拼接上http://后返回给前端img src直接使用。
