nextTick이 그림의 너비와 높이를 가져올 수 없습니다.

nextTick메서드 자체는 이미지의 너비와 높이를 직접 얻을 수 없으며 다음 DOM 업데이트 주기가 끝난 후 콜백 함수를 실행하는 데만 사용됩니다. 그림의 너비와 높이를 얻으려면 콜백 함수에서 다른 메서드를 사용하여 가져와야 합니다.

일반적인 방법은 Image객체를 사용하여 이미지를 로드하고 로드한 후 이미지의 너비와 높이를 가져오는 것입니다. onload이미지가 로드된 후 콜백 함수를 실행하도록 이벤트 리스너를 설정할 수 있습니다 .

다음은 이미지의 너비와 높이를 가져오기 위해 nextTick및 개체를 사용하는 방법을 보여주는 샘플 코드입니다.Image

import {
    
     nextTick } from 'vue';

export default {
    
    
  mounted() {
    
    
    nextTick(() => {
    
    
      const image = new Image();
      image.src = 'path/to/image.jpg';
      image.onload = () => {
    
    
        const width = image.width;
        const height = image.height;
        console.log(`Image size: ${
      
      width}px x ${
      
      height}px`);
      };
    });
  }
}

위의 예에서는 먼저 객체를 생성 Image하고 src해당 속성을 이미지의 경로로 설정했습니다. 그런 다음 이벤트 리스너를 설정하여 onload이미지가 로드된 후 콜백 함수가 실행됩니다. 콜백 함수에서는 그림의 너비와 높이를 가져와 해당 작업을 수행할 수 있습니다.

`path/to/image.jpg에 유의하세요.

도구 모음: https://aiburgeon.com/siteCollection/

여기에 이미지 설명을 삽입하세요

추천

출처blog.csdn.net/qq_25741071/article/details/132608810