img tag with two quotes in vuejs

Question

I'm creating a component to upload a picture and then display it after the picture is uploaded. However, I'm getting the response link of the image with a double quote and the <img> tag adds another double quotes to the image link hence the image doesn't get displayed. I've tried .slice(1,-1) but it isn't working as well. How do I correctly display the image with just a single 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>

Answer 1

Update: you're trying to get some results from an API but we learned that it was actually a graphql one, so here is how the whole process is looking.

So, this is how a graphql playground looks like. You input your params on the left (query) and you get your result on the right, in data.

Here you can see my photo query, I have another one on the other tab.
photos query below:

query {
  photos {
    data {
      id
    }
  }
}

Basically, those are equivalent to REST GET. It's just a bit more complex to understand and a totally different backend organization.

I achieved to find a make you some codesandbox to illustrate how it works, here it is: https://codesandbox.io/s/somehow-working-graphql-example-3rqvj?file=/src/components/Photos.vue

The endpoint of the gql can be found in main.js aka https://graphqlzero.almansi.me/api. You can play in it without any code, it's ready to be used as is: write your query on the left and press the "play" button !
You also do have some useful docs section on the right, it may help you somehow.

The linked project do have all the gql calls in /graphql/ and the Photos.vue is an example on a possible way to make the call (there are several). The current setup only works for a single ApolloQuery so...if you want to see the result, comment one and see the other. If they are both un-commented at the same time it will not work but it comes down to configuration and it tedious and not really interesting to replicate it there...
You may also need to hard refresh it or to relaunch the sandbox because the dynamic import is messing pretty hard here... Maybe, the simplest way would be to just clone this and try it locally tbh.

---

So yeah, you do have it. It is how you can fetch an URL from a graphql API and display it on your page.
I can heavily recommend you taking this quick free course on Youtube to understand a bit better how this whole thing works: https://www.youtube.com/watch?v=ygUDIeiYZNA&list=PLTRTpHrUcSB--g_8qkmycKyB0WAua9sZR

Hope it somehow helped, cannot do more right now.