[javascript] vue javascript 내에서 정적 자산을 참조하는 방법

Program / 글쓴이

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

예를 들어 사용자 지정 아이콘 이미지를 사용하여 전단지 마커를 만들고 여러 URL을 시도했지만 모두 다음을 반환합니다 404 (Not Found).

Main.vue :

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

운이없는 자산 폴더와 정적 폴더에 이미지를 넣어 보았습니다. 어떻게 든 이미지를로드하도록 vue에 알려야합니까?

답변

템플릿에서 이미지를 참조하려는 사람은 ‘@’를 사용하여 직접 이미지를 참조 할 수 있습니다.

예:

<img src="@/assets/images/home.png"/>

답변

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

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

JavaScript 내에서 사용 : require()

JS 코드에서 이미지를 가져 오려면 require('../assets.myImage.png'). 경로는 상대 경로 여야합니다 (아래 참조).

따라서 코드는 다음과 같습니다.

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

상대 경로 사용

예를 들어 다음과 같은 폴더 구조가 있다고 가정합니다.

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

에서 이미지를 참조하려는 경우 MyComponent.vue경로는 다음과 같습니다.../assets/myImage.png

다음 은 실제로 작동 하는 데모 코드 상자 입니다.

답변

Webpack이 올바른 자산 경로를 반환하려면 require ( ‘./ relative / path / to / file.jpg’)를 사용해야합니다. 이는 파일 로더에 의해 처리되고 확인 된 URL을 반환합니다.

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

VueJS 템플릿-정적 자산 처리 참조

답변

더 나은 해결책은

@acdcjunior의 답변에 몇 가지 좋은 관행과 만족도를 추가 @하여./

JavaScript에서

require("@/assets/images/user-img-placeholder.png")

JSX 템플릿에서

<img src="@/assets/images/user-img-placeholder.png"/>

사용 @받는 포인트를 src디렉토리.

~프로젝트 루트에 대한 포인트를 사용하여 node_modules다른 루트 수준 리소스에 더 쉽게 액세스 할 수 있습니다.

답변

oppening 스크립트 태그 바로 뒤에 import someImage from '../assets/someImage.png'
아이콘 URL에 추가 하고 사용하십시오.iconUrl: someImage

답변

어떤 시스템을 사용하고 있습니까? Webpack? Vue-loader?

여기서 만 브레인 스토밍하겠습니다 …

.png는 JavaScript 파일이 아니기 때문에 파일 로더 또는 url-loader를 사용하여 처리하도록 Webpack을 구성해야합니다. vue-cli로 스캐 폴딩 된 프로젝트도이를 구성했습니다.

다음 webpack.conf.js과 같이 잘 구성되었는지 확인하기 위해 살펴볼 수 있습니다.

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

/assets 번들링 중에 웹팩에 의해 처리되는 파일을위한 것입니다.이를 위해서는 자바 스크립트 코드의 어딘가에서 참조되어야합니다.

다른 자산을에 넣을 /static수 있으며이 폴더의 내용은 /dist나중에있는 그대로 복사됩니다 .

변경을 시도하는 것이 좋습니다.

iconUrl: './assets/img.png'

…에

iconUrl: './dist/img.png'

공식 문서는 https://vue-loader.vuejs.org/en/configurations/asset-url.html 에서 읽을 수 있습니다.

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

답변

Vue CLI에 의해 생성 된 폴더의 기본 구조를 가지면 src/assets이미지를 여기에 배치하고 다음과 같이 HTML에서 참조 할 수 <img src="../src/assets/img/logo.png">있습니다 (배포시 변경없이 자동으로 작동).