계산된 속성과 Webpack을 사용하여 Vue.js에서 이미지를 동적으로 표시하는 방법은 무엇입니까?

Webpack을 사용하는 Vue.js의 동적 이미지 표시

webpack을 사용하는 Vue.js 애플리케이션에서 동적으로 이미지를 표시하려고 할 때 문제가 발생할 수 있습니다. 계산된 속성에 파일 이름이 저장된 이미지를 표시합니다. 특히 이러한 속성이 비동기적으로 채워진 Vuex 저장소 변수에 의존하는 경우 이미지 경로가 올바르게 확인되지 않는 것을 관찰할 수 있습니다.

다음 Vue 템플릿을 고려하세요.

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

이 접근 방식이 작동하는 동안 정적 이미지 경로가 제공되면 완벽하게 작동합니다(예: ), 계산된 속성에서 경로가 동적으로 생성될 때 이미지를 표시하지 못합니다. 비슷한 문제가 이 바이올린에서 보고되고 해결되었습니다.

이 문제를 해결하려면 다음 JavaScript 코드를 사용할 수 있습니다.

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

이 함수는 webpack의 require.context()를 활용하여 동적으로 제공된 파일 이름을 기반으로 특정 디렉터리에서 이미지를 로드합니다.

HTML 템플릿에서 v-bind:src 속성은 다음을 참조하도록 업데이트되어야 합니다. 경로를 직접 생성하는 대신 getImgUrl() 함수:

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

이 솔루션을 구현하면 이미지 파일 이름이 계산된 속성에 저장되어 있는 경우에도 webpack을 사용하여 Vue.js 애플리케이션에 이미지를 동적으로 표시할 수 있습니다.

위 내용은 계산된 속성과 Webpack을 사용하여 Vue.js에서 이미지를 동적으로 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!