img src에 대해 Vue JS 데이터 바인딩이 작동하지 않음

img src에 대해 Vue JS 데이터 바인딩이 작동하지 않음

vue 2와 vue-cli 3을 사용하고 있습니다.태그의 src를 데이터 변수에 바인드하려고 합니다.

구체적으로는, 다음과 같이 하고 있습니다.

<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">

export default {
   name: "home",
   components: {},  
   data() {
       return {
           locale: locale // 'en'
       };
   }
}

바인딩은 기능합니다.

Chrome 개발자 도구를 사용하여 네트워크 액티비티를 조사하면 바인딩이 기능하는 것을 알 수 있습니다.

http://localhost:8080/time-syson-en.png

그러나 리소스를 찾을 수 없습니다.

하드 코드에서 데이터 바인딩을 제거할 경우 과정 경로는 다음과 같습니다.

<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">

Vue는 이미지를 검색할 리소스 링크를 해결합니다.

http://localhost:8080/img/time-invison-en.74a6f0ca.png

바인딩이 올바르게 해결되도록(예: time-comparison-en.74a6f0ca.png) Vue를 데이터 바인딩으로 만들려면 어떻게 해야 합니까?

감사합니다!

시도해 보세요require

<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">

언급URL : https://stackoverflow.com/questions/55152795/vue-js-data-binding-not-working-for-img-src