Vue.js img src는 변수와 텍스트를 연결합니다.

Vue.js img src는 변수와 텍스트를 연결합니다.

---

Vue.js 변수를 이미지 URL과 연결하고 싶습니다.

내가 계산 한 것 :

imgPreUrl : function() {
    if (androidBuild) return "android_asset/www/";
    else return "";
}

Android 용으로 빌드하는 경우 :

<img src="/android_asset/www/img/logo.png">

그밖에

<img src="img/logo.png">

계산 된 변수를 URL과 연결하려면 어떻게해야합니까?

나는 그것을 시도했다 :

<img src="{{imgPreUrl}}img/logo.png">

---

속성에는 컬리 (콧수염 태그)를 사용할 수 없습니다. 다음을 사용하여 데이터를 연결하십시오.

<img v-bind:src="imgPreUrl + 'img/logo.png'">

또는 짧은 버전 :

<img :src="imgPreUrl + 'img/logo.png'">

Vue 문서 에서 동적 속성에 대해 자세히 알아보세요 .

---

다른 경우에는 백틱이있는 템플릿 리터럴 ES6를 사용할 수 있으므로 다음과 같이 설정할 수 있습니다.

<img v-bind:src="`${imgPreUrl()}img/logo.png`">

---

단지 시도

<img :src="require(`${imgPreUrl}img/logo.png`)">

---

작동하지 않음 :

<div :class="['some-class', someClassNameProp, { `some-class--${specificModifierProp}`: showSomethingSpecificProp }]" >

보다 나은

<div :class="['some-class', someClassNameProp, showSomethingSpecificProp ? specificModifierComputed : '']" >

...

computed: {
  specificModifierComputed() {
    return `some-class--${specificModifierProp}`;
  }
},

참고 URL : https://stackoverflow.com/questions/40255291/vue-js-img-src-concatenate-variable-and-text