vue-cli resolve xlink: 참조 시 svgs 단위의 hrefvue-cli resolve xlink: 참조 시 svgs 단위의 href

vue-cli resolve xlink: 참조 시 svgs 단위의 href

vue-cli 프로젝트에서 svg 파일을 참조해야 합니다.<img>- 태그. - 됐어.

이 svg 파일 안에는<image xlink:href="...">– 이 경로는 웹 팩에 의해 처리되거나 해결되지 않습니다.

예:

<!-- MyComponent.vue -->
<img src="@/assets/someImage.svg" />

<!-- someImage.svg -->
<svg ...>
  <!-- none of these are working -->
  <image ... xlink:href="@/assets/arcade-bg-4.jpg"/>
  <image ... xlink:href="~@/assets/arcade-bg-4.jpg"/>
  <image ... xlink:href="./assets/arcade-bg-4.jpg"/>
  <image ... xlink:href="/src/assets/arcade-bg-4.jpg"/>
</svg>

여기서 문제는 어떻게 웹 팩에 이 svg 파일 내의 경로를 해결하도록 지시할 수 있는가 하는 것입니다.

생각할 수 있는 회피책: * putarcade-bg-4.jpg에/public이것을 참조해 주세요.xlink:href* 인라인 사용-<svg>에MyComponent.vue

하지만 난 이 모든 걸 간직하고 싶다.<img />vue-cli에서 파일 해시 기능을 유지하고 태그를 지정합니다.

배경:이 설정을 사용하여 (상대적인) 크로스 브라우저 대응 클립 마스크를 실현합니다..jpg대신.png훨씬 작고 퍼포먼스도 뛰어납니다.

그냥 사용하시면 됩니다.href대신xlink:href에<image>의<svg>

또는

이렇게 v-bind와 함께 require를 사용해야 합니다.<image ... :href="require('@/assets/arcade-bg-4.jpg')" />

또는

Web 팩의 경우는, 이것을 에 추가할 필요가 있습니다.vue-loader's 옵션 중 하나transformToRequire또는 버전에 따라

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          transformToRequire: {
           image: ['xlink:href', 'href']
          }
        }
      }
    ]
  }
}

언급URL : https://stackoverflow.com/questions/55591117/vue-cli-resolve-xlinkhref-in-svgs-when-referenced-in-img-src