vue2.0 동적으로 바인딩된 이미지의 src 속성값 초기화 시 오류가 발생하는 문제 해결

이제 vue2.0에서 동적으로 바인딩된 이미지의 src 속성 값을 초기화할 때 발생하는 오류 문제를 해결한 기사를 공유하겠습니다. 좋은 참고 값이 있어 모든 분들께 도움이 되기를 바랍니다.

vue2.0에서는 v-bind:src = " imgUrl "(약어: src = " imgUrl ")과 같은 구문이 자주 사용됩니다. 사례를 살펴보세요

<template>
  <p>
    <img :src="imgUrl">
  </p>
</template>
<script>
export default {
  data(){
    return {
      captcha_id: "" 
    }
  },
  computed: {
    imgUrl(){
      return &#39; http://www.demo.com/static/ &#39;+ this.captcha_id + &#39;.png&#39;
    },
  },
  methods: {
    init(){
        // 此处省略一个请求 ，假设成功返回数据为 res
        this.captcha_id = res.data.captcha_id;
    },
  }  
  created(){
    this.init();
  }
}
</script>
<style lang="scss" scoped>
</style>

위의 경우와 마찬가지로, 데이터에 captcha_id 필드는 네트워크 요청을 통해 얻어야 하며 페이지가 렌더링되었을 수 있으므로 이미지가 로드될 때마다 404 오류가 표시됩니다. ://www.demo.com/' static/.png' 입니다.

해결책은 다음과 같습니다.

computed: {
    imgUrl(){
      if(this.captcha_id){
        return this.$store.state.cmnUrl +'/v1/cmn/captcha/new/' + this.captcha_id + '.png'
      }else{
        return null;
      }
    },
  },

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사 :

vue의 브라우저 스토리지 메소드 캡슐화 예

vue는 Bootstrap-dateTimepicker 시간의 예제를 저장 한 후 종료하라는 프롬프트 방법을 구현합니다.

위 내용은 vue2.0 동적으로 바인딩된 이미지의 src 속성값 초기화 시 오류가 발생하는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!