vue javascript 내의 정적 자산을 참조하는 방법

Question

Vue javascript 내의 이미지와 같은 정적 자산을 참조 할 수있는 올바른 URL을 찾고 있습니다. 예를 들어

, 나는 사용자 정의 아이콘 이미지를 사용하여 전단지 마커를 만드는거야, 나는 여러 URL을 시도했다, 그러나 그들 모두는 404 (Not Found) 반환 :

Main.vue :

var icon = L.icon({ 
    iconUrl: './assets/img.png', 
    iconSize:  [25, 25], 
    iconAnchor: [12, 12] 
}); 

자산 폴더와 정적 폴더에 이미지를 넣으려고했지만 행운이 없습니다. 그 이미지를 어떻게 든로드하도록 vue에 말해야합니까?

Answer 1

어떤 시스템을 사용하십니까? 웹팩? Vue-loader? .PNG는 자바 스크립트 파일이 아니기 때문에

나는 단지 여기 브레인 스토밍거야 ...

, 당신은 그 (것)들을 처리하기 위해 파일 로더 또는 URL 로더를 사용하는 웹팩을 구성해야합니다. vue-cli로 스캐 폴딩 된 프로젝트도 이것을 구성했습니다.

이 잘

... 
    { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url-loader', 
     options: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
... 

/assets 같은 구성 않다면 당신은 참조하기 위해 webpack.conf.js에서 좀 걸릴 수 있습니다

는 번들 동안 웹팩에 의해 핸들있는 파일입니다 - 그것을 위해, 그들은 어딘가에 참조 할 필요가 당신의 자바 스크립트 코드.

/static에 다른 저작물을 넣을 수 있습니다.이 폴더의 콘텐츠는 현재 그대로 /dist으로 복사됩니다. 당신은 여기에 공식 문서를 읽을 수 있습니다

iconUrl: './assets/img.png'

iconUrl: './dist/img.png'

에 :

난 당신이 변경하려고하는 것이 좋습니다 https://vue-loader.vuejs.org/en/configurations/asset-url.html

은 당신에게 도움이되기를 바랍니다!

Answer 2

Vue 일반 설정에서는 /assets이 제공되지 않습니다.

대신 이미지는 src="data:image/png;base64,iVBORw0K...YII=" 문자열이됩니다. require()

는, JS 코드에서 이미지를 얻을 require('../assets.myImage.png') 사용하려면 자바 스크립트 내에서 사용

. 경로는 상대 경로 여야합니다 (아래 참조).

그래서 코드가 될 것이다 : 당신이 원하는 경우

- src 
    +- assets 
    - myImage.png 
    +- components 
    - MyComponent.vue 

:

var icon = L.icon({ 
    iconUrl: require('./assets/img.png'), // was iconUrl: './assets/img.png', 
    // ... 
}); 

를 사용하여 상대 경로 예를 들어

, 다음과 같은 폴더 구조를 갖고 있다고 MyComponent.vue의 이미지를 참조하려면 경로가 행동을 보여 ../assets/myImage.png

여기 a DEMO CODESANDBOX합니다.