Vue.js 및 Webpack 애플리케이션에서 이미지를 동적으로 렌더링하려면 어떻게 해야 합니까?

Webpack을 사용하는 Vue.js의 동적 이미지 렌더링

Vue.js 및 webpack 애플리케이션에서는 변수에 따라 이미지를 동적으로 표시해야 하는 상황이 발생할 수 있습니다. . 그러나 동적 이미지가 올바르게 표시되지 않는 문제가 발생하는 경우 근본적인 문제를 해결하는 것이 중요합니다.

이 문제가 자주 발생하는 한 가지 사례는 이미지의 파일 이름을 계산된 속성에 저장할 때입니다. beforeMount에서 비동기적으로 채워진 Vuex 저장소 변수를 검색합니다. v-bind:src 지시문을 활용하여 동적 파일 이름을 정적 자산 경로와 연결하여 이미지 소스를 생성하려고 합니다. 그러나 이 접근 방식은 항상 원하는 결과를 얻지 못할 수도 있습니다.

대신에 더 강력한 솔루션은 webpack의 require.context() 메서드를 활용하는 것입니다. 이 방법을 사용하면 제공된 정규식을 기반으로 특정 디렉터리의 파일에 액세스할 수 있습니다. 예를 들어 이 방법을 사용하면 자산 디렉터리에서 모든 .png 파일을 얻을 수 있습니다.

이 솔루션을 구현하려면 이미지 파일 이름을 인수로 받아들이는 Vue.js 구성 요소에 메서드를 정의하세요. 이 메서드 내에서 require.context를 사용하여 이미지 경로를 검색하고 반환합니다. HTML 템플릿에서 img 태그의 src 속성을 이 메서드에 바인딩합니다.

<div class="col-lg-2" v-for="pic in pics">
  <img src="/static/imghwm/default1.png" data-src="getImgUrl(pic)" class="lazy" : v-bind:alt="pic">
</div>

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

require.context 메서드를 동적 메서드와 함께 활용하면 다음 문제를 효과적으로 해결할 수 있습니다. Vue.js 및 webpack 애플리케이션의 동적 이미지 렌더링.

위 내용은 Vue.js 및 Webpack 애플리케이션에서 이미지를 동적으로 렌더링하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!