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에 유의하세요.