I am currently working on a feature where users can upload an image and then have it displayed after the upload is complete. However, I am facing an issue where the response link of the image contains a double quote, and when I use the <img> tag to display the image, it adds another set of double quotes which prevents the image from being displayed. I tried using .slice(1,-1) but it did not solve the problem. How can I correctly display the image with just a single set of double quotes in the <img> tag?
<template>
<img :src="srcUrl"/>
</template>
<script>
uploadFile(file) {
const formData = new FormData();
formData.append("file", file);
const request = new XMLHttpRequest();
request.addEventListener("readystatechange", () => {
if (request.readyState === 4) {
const uploadedUrl = request.response;
this.srcUrl = uploadedUrl; //getting a link with double quotes here and used slice but didn't work
}
});
request.open("POST", "BaseURI");
request.send(formData);
},
</script>