vuejs에 따옴표가 두 개 있는 img 태그

vuejs에 따옴표가 두 개 있는 img 태그

사진을 업로드할 컴포넌트를 만들고 사진이 업로드된 후 표시합니다.하지만 큰따옴표로 이미지의 응답 링크를 받고 있습니다.<img>tag를 지정하면 이미지 링크에 큰따옴표가 추가되므로 이미지가 표시되지 않습니다.해봤어요.slice(1,-1)잘 안 돼요.큰따옴표 하나로 이미지를 올바르게 표시하려면<img>태그를 붙입니다.

<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>

업데이트: API에서 결과를 얻으려고 하는데 실제로는 graphql이라는 것을 알게 되었기 때문에 프로세스 전체를 이렇게 볼 수 있습니다.

graphql 놀이터는 다음과 같습니다.왼쪽에 파라미터를 입력합니다(query)의 오른쪽에서 결과를 얻을 수 있습니다.data를 클릭합니다.

여기 내 사진이 있습니다.photo쿼리, 다른 탭에 하나 더 있습니다.
photos query이하에 나타냅니다.

query {
  photos {
    data {
      id
    }
  }
}

기본적으로는 REST와 동등합니다.GET조금 더 이해하기 쉽고 완전히 다른 백엔드 구성입니다.

Make Code and Box를 찾아서 어떻게 작동하는지 설명했습니다. https://codesandbox.io/s/somehow-working-graphql-example-3rqvj?file=/src/components/Photos.vue

gql의 엔드포인트는 다음 URL에서 찾을 수 있습니다.main.js일명 https://graphqlzero.almansi.me/api 입니다.코드 없이 바로 사용할 수 있습니다. 왼쪽에 쿼리를 쓰고 "재생" 버튼을 누르십시오!
그리고 도움이 될 만한 것도 있어요.docs오른쪽 섹션이 도움이 될 수도 있습니다.

링크된 프로젝트에 모든 gql 호출이 있습니다./graphql/및 그Photos.vue는, 가능한 콜의 발신 방법의 예입니다(여러 가지가 있습니다).현재 설정은 1개만 사용할 수 있습니다.ApolloQuery그러니까... 결과를 보고 싶으면 댓글 하나 달고 다른 하나를 보세요.둘 다 동시에 코멘트가 되어 있지 않은 경우는, 동작하지 않습니다만, 결국 구성에 관한 것이므로, 거기에 복제하는 것은 귀찮고 그다지 흥미롭지 않습니다.
또한 하드 리프레시 또는 샌드박스 재기동이 필요할 수 있습니다.다이나믹 Import가 매우 어려워지고 있기 때문입니다.아마도 가장 간단한 방법은 이것을 복제하여 로컬 tbh로 시험하는 것입니다.

---

그래, 네가 가지고 있어.이를 통해 graphql API에서 URL을 가져와 페이지에 표시할 수 있습니다.
이 모든 것이 어떻게 돌아가는지 좀 더 잘 이해하기 위해 유튜브에서 이 빠른 무료 강좌를 수강하는 것을 강력히 추천할 수 있다.

도움이 됐으면 좋겠는데, 지금은 더 이상 할 수 없어요.

언급URL : https://stackoverflow.com/questions/66089612/img-tag-with-two-quotes-in-vuejs