~asset 폴더의 Vue + Webpack 별칭 동적 이미지 src

~asset 폴더의 Vue + Webpack 별칭 동적 이미지 src

웹 팩 별칭을 사용하여 Vue 데이터에서 동적 이미지 src를 얻으려고 한다.

다음을 사용하여 올바른 폴더에 액세스하려면 다음과 같이 하십시오.~assets/html 또는 css에서 나는 내 웹팩 구성에 자산 별칭을 추가했다.

웹 팩 구성

resolve: {
  alias: {
    ...
    'assets': resolve('src/assets')
    ...
},

부에 데이터

data: {
  ...
  img: 'name-of-my-image.jpg',
  ...
}

html

<img :src="'~assets/' + img"> // Does not work

~assets/일반 src 이미지와 완벽하게 작동함<img src="~assets/...">또는 CSS 영상 포함url('~assets/...')

사용 방법~assets/와 함께:src와 함께dataVue로부터?

여기 다른 방법이 있다.

메서드에 이 코드 추가

    getImgUrl(img) 
    {
            return '~assets/' + img
    }

템플릿에서 이렇게 호출

 <img :src="getImgUrl(img)">

의 도움을 받아 이미지 URL을 확인하여 경로를 반환하는 메서드 생성require

방법:

    getImage(image) {
        return require("Images/" + image);
    }

여기서 "이미지"는 웹 팩 구성에 정의된 별칭이다.

템플릿:

img(:src="getImage('imageName.jpg')")

참조URL: https://stackoverflow.com/questions/47897431/vue-webpack-alias-dynamic-image-src-from-asset-folder