Trying to display the initial image from s3 in vue-file-pond, but encountering a CORS origin policy issue due to Xhr requests being blocked. (Server-side option is not used as images are submitted through the form.) Here is my file pond tag:
<file-pond
style="width: 100px; height: 100px"
name="image"
ref="image"
label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
:allow-multiple="false"
accepted-file-types="image/*"
style-panel-layout="compact circle"
image-preview-height="70"
image-crop-aspect-ratio="1:1"
image-resize-target-width="100"
image-resize-target-height="100"
@removefile="removefile(category.image, 'image')"
@addfile="addImage"
v-bind:files="image"
/>
---------------------------------
data(){return{
image: this.category.image
? [this.storage_url + this.category.image]
: "",}
}
,
methods:{
addImage() {
this.form.image = this.$refs.image.getFile().file;
},
}
storage_url represents the S3 base URL. The image loads fine on an img tag, but in file pond... what could be done? A whole week spent dealing with this frustration!