Vue.js 및 Webpack에서 동적 이미지 로딩이 실패하는 이유는 무엇입니까?

Webpack을 사용하는 Vue.js의 동적 이미지 로드 문제

Vue.js 및 Webpack을 사용하여 웹 애플리케이션을 구축할 때 동적 이미지를 표시할 수 없는 경우가 있습니다. 도전을 제시합니다. 일반적인 시나리오 중 하나는 이미지 파일 이름이 변수에 저장되고 전체 이미지 소스를 생성하기 위해 기본 경로에 추가되어야 하는 경우입니다.

개발자는 이미지를 동적으로 표시하기 위한 다음 코드에서 문제에 직면했습니다. 계산된 속성을 기반으로 실패:

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

흥미롭게도 정적 이미지 경로를 사용하는 유사한 접근 방식은 다음과 같이 작동했습니다. 예상:

<img src="../assets/dog.png" alt="dog">

두 가지 접근 방식의 차이점에 퍼즐이 있습니다. 정적 경로를 사용하면 Webpack이 빌드에 이미지를 포함하도록 직접 지시하여 런타임 시 가용성을 보장합니다. 그러나 동적 접근 방식은 런타임에 생성되는 이미지 경로에 의존하므로 Webpack은 빌드 프로세스 중에 이를 예상할 수 없습니다. 결과적으로 이미지가 번들에 포함되지 않아 파일이 누락됩니다.

이 문제를 해결하기 위해 개발자는 모듈이나 파일을 동적으로 로드하는 방법을 제공하는 require.context() 메서드를 사용했습니다. 특정 상황 내에서. 다음 코드를 사용하여

getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
}

HTML을 다음과 같이 업데이트합니다.

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

개발자는 원하는 효과를 얻었습니다. require.context()를 사용하면 pic 속성 값에 따라 이미지 파일을 동적으로 로드할 수 있었고 Webpack은 필요한 이미지를 번들에 포함시켰습니다.

위 내용은 Vue.js 및 Webpack에서 동적 이미지 로딩이 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!