항상 0을 반환하는 Vue에서 로드 시 이미지 크기 계산

항상 0을 반환하는 Vue에서 로드 시 이미지 크기 계산

Vuex 객체 배열에서 로드되는 여러 이미지의 너비 합계를 계산해야 함:

   var activities = [
        {
            id: 1,
            imageUrl: '/static/images/activity1.jpg',
        },
        {
            id: 2,
            imageUrl: '/static/images/activity2.jpg',
        }
    ]

그러나 장착() 방법으로 직접 테스트해도 크기는 항상 0이다.

    mounted: function() {
        console.log(document.getElementById('scroller-list').children[0].firstChild.offsetWidth)
    },

모든 게 끝난 후에 부에에게 그 사이즈들을 가져오라고 강요할 방법이 없을까?

내 코드에도 비슷한 사례가 있다(이 방법이 더 도움이 되기를 바란다). 내 경우 캔버스 크기를 조정하고 싶다(이미지가 들어 있음).내 생각에 유일한 차이점은 당신이 아이던트를 반복해서 넓이를 합해야 한다는 것이다.

methods: {
    resizeCanvas () {
       var ratio = Math.max(window.devicePixelRatio || 1, 1)
       var canvas = document.querySelector('canvas')
       if (canvas) {
         canvas.width = canvas.offsetWidth * ratio
         canvas.height = canvas.offsetHeight * ratio
         canvas.getContext('2d').scale(ratio, ratio)
       }
     }
   }


mounted () {
  const canvas = document.querySelector('canvas')

  window.addEventListener('resize', this.resizeCanvas)
  this.resizeCanvas()
}

참조URL: https://stackoverflow.com/questions/44047837/calculating-image-sizes-on-load-in-vue-always-returning-zero