Webpack을 사용하여 Vue.js 애플리케이션에서 이미지를 동적으로 표시하는 방법은 무엇입니까?

Webpack을 사용하여 Vue.js 애플리케이션에 동적 이미지 표시

Vue.js 애플리케이션에서 이미지가 변수에 저장되고 파일을 통해 액세스할 때 동적 이미지 렌더링이 어려울 수 있습니다. 경로. 이를 극복하기 위해 개발자는 이미지 파일 이름을 검색하는 계산된 값과 함께 v-bind:src를 사용할 때 일반적으로 문제에 직면합니다.

원래 방법:

<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">

문제:

이 접근 방식은 이미지 파일 이름이 변수에 저장된 경우 동적 이미지를 렌더링하지 않습니다.

해결 방법:

이 문제를 해결하려면 사용자 정의 메소드 getImgUrl을 정의하여 이미지 URL을 동적으로 검색하고 이를 img 요소의 src 속성에 바인딩할 수 있습니다.

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

<!-- HTML -->
<img :src="getImgUrl(pic)" v-bind:alt="pic">

원래 메소드가 실패한 이유 :

Vue.js가 파일 경로 문자열을 동적으로 확인할 수 없기 때문에 원래 방법이 실패했습니다. require.context 기능을 사용하면 Vue가 애플리케이션 내의 정적 자산에 액세스할 수 있으므로 getImgUrl 메소드가 더욱 안정적인 솔루션이 됩니다.

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