Vuejs 2 이미지 Src 속성

Vuejs 2 이미지 Src 속성

Vuejs 라이커들이 도와줘!

이미지 소스와 함께 이미지 루프가 있습니다.여기 암호가 있습니다.

<img :src="'../../'+ photo.path" alt="product" height="207" width="175" v-for="photo in product.photos" v-if="photo.is_primary === 1" />

이 프레픽스를 베이스 URL로 치환하여 재사용할 수 있도록 합니다.

../../

어떻게? TY

:src="value"를 실행하면 계산된/데이터에서 값을 가져오므로 계산된 속성에 URL을 빌드하기만 하면 됩니다.

yourUrl (){
    //build your url here, can be base url or whatever
    return url
}

//html
:src="yourUrl"

그게 다예요.

웹 팩에 의존관계로 처리하도록 지시하려면require():

<img :src="require('../../' + photo.path)" alt="..." />

이렇게 하면 경로가 구성 요소 파일이 아닌 빌드 파일에 상대적인 경로가 됩니다.

제가 제대로 이해했다면 여러 컴포넌트에서 사용할 기본 URL을 추가하고 각 컴포넌트에서 변경할 필요가 없다고 생각하십니까?

config.js 또는 이름을 붙이고 싶은 모든 것을 src 폴더 또는 장소에 생성하여 추가할 수 있습니다.

export const baseUrl = 'my/img/base'

그런 다음 baseUrl을 추가하는 컴포넌트에서

import { baseUrl } from '@/src/config'

data () {
  return {
    baseUrl: baseUrl 
    ...
  }
}

경로를 설정 위치로 변경합니다.

언급URL : https://stackoverflow.com/questions/43602058/vuejs-2-image-src-attributes