Vue CLI - 정적 파일에 자산 폴더의 이미지 포함

Vue CLI - 정적 파일에 자산 폴더의 이미지 포함

다음 위치에 있는 이미지를 포함할 수 있는가?assets/다소 정적인..scss파일로, 일렬로 배열하다.background-image?

나는 a를 가지고 있다._buttons.scss일부 및 일부 버튼에는 아이콘이 있으며, 이 아이콘은 다음과 같이 추가하고자 한다.background-image아이콘은 에 위치한다.src/assets/포를 씌우다

앱 구조:

- src
  - assets
    some_icon.svg
  - components
  - scss
    _buttons.scss
    main.scss
  - views
  App.vue
  main.js
  router.js

그리고 안에_buttons.scss:

.some-selector {
    background-image: url(../assets/some_icon.svg)

    /* also tried
    background-image: url(./assets/some_icon.svg)
    background-image: url(/assets/some_icon.svg)
    background-image: url(assets/some_icon.svg)
    */
}

에 대한 오류를 반환하는 것This relative module was not found.

구성 요소 또는 메인 App.vue에 이러한 스타일(범위 지정 여부)을 간단히 추가할 수 있다는 것을 알고 있지만, 그것 없이 이 스타일을 달성할 수 있는지 궁금했다.

나는 또한 내가 그 아이콘들을 내 안에 추가할 수 있다는 것을 안다.public폴더, 그러나 아이콘은 계속assets/폴더로 만들다

$ vue -V
$ 3.0.0-rc.5

사용자 지정 웹 팩 구성으로 하시겠습니까?

고마워요.

다음을 통해 이를 관리할 수 있다.

background-image: url('~@/assets/some_icon.svg');

키 사용 중~@접두사로~가 앞에 붙은 URL은 모듈 요청으로 처리한다.Webpack의 모듈을 사용하여 구성을 해결하려면 이 접두사를 사용하십시오.예를 들어 src 폴더에 대한 해결 별칭이 다음과 같은 경우@vue-cli3를 사용할 경우 이 유형의 URL을 사용하여 Webpack이 자산 폴더의 필요한 자산으로 강제로 해결하도록 할 수 있다.자세한 정보: 정적 자산 처리

참조URL: https://stackoverflow.com/questions/51531821/vue-cli-include-image-from-assets-folder-in-static-file