vue img src 동적구성

vue img src 동적구성 

 

 

for를 통해 리스트를 출력하면서 

이미지 URL을 동적으로 구성해야하는 상황이었다. 인터넷을 찾아보니 괜찮은 소스가 있어 정리해서 올려 둔다. 

자바스크립트 함수를 이용하는 방법이다. 

/**
 * 이미지 경로 구성
 * @param co
 * @returns {*}
 */
getImgUrl(co, size) {
  let images = require.context('../../assets/bankimg/', false, /\.png$/)
  if (size == 0) {
    return images('./' + co + ".png")
  } else {
    return images('./'+ co + "@" + size + "x.png")
  }

},

/**
 * image srcset value return 
 * @param co
 * @returns {string}
 */
getSrcSet(co) {
  let srcset = this.getImgUrl(co, 2) + " 2x, "+  this.getImgUrl(co, 3) + " 3x"
  return srcset
}

위의 함수는 context를 이용, images안에 요청한 파일명을 조합해서 리턴하는 방식이다. 

사용할 때는 다음과 같이 한다. 

<img :src="getImgUrl(list.finance_co, 0)" :srcset="getSrcSet(list.finance_co)" />