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`)">

이것을 DataBase에서 취급하는 경우는, 다음과 같이 시험해 주세요.

<img :src="baseUrl + 'path/path' + obj.key +'.png'">

만약 도움이 된다면, 나는 그라바타 이미지를 얻기 위해 다음을 사용합니다.

<img
        :src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
        class="rounded-circle"
        :width="size"
    />

저는 모듈이 발견되지 않아 작동하지 않는다고 했습니다.마침내 나는 이 해결책을 찾아 일을 했다.

<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>

로컬 경로의 선두에 '@'를 추가해야 합니다.

두 가지 방법을 모두 사용할 수 있습니다.

방법 1

와 연결하다+단일/이중 따옴표로 문자열을 묶습니다.

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

방법 2

백틱으로 포장`및 변수 줄 바꿈${variable}.~하듯이imgPreUrl방법이니까

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

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