vue.js - vue-cli 在引用时解析 svgs 中的 xlink:href

Question

<img>在我的 vue-cli 项目中，我需要在-tag中引用一个 svg 文件。这样可行。

现在在这个 svg 文件中，我有一个<image xlink:href="...">- 而且这个路径没有被 webpack 触及或解析。

例子：

<!-- 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>

现在的问题是，我如何告诉 webpack 解决这个 svg 文件中的路径？

可能的解决方法： * 放入并在 * use inline- arcade-bg-4.jpgin中/public引用 thisxlink:href<svg>MyComponent.vue

但我想保留<img />-tag 并保留 vue-cli 的文件散列功能。

背景：我使用此设置来实现（相对）跨浏览器就绪的剪辑蒙版，使用 a.jpg而不是 a .png，它更小且性能更高。

Answer 1

你应该使用 justhref而不是xlink:hrefin <image>of<svg>

或者

您需要像这样使用 require 和 v-bind <image ... :href="require('@/assets/arcade-bg-4.jpg')" />

或者

在 webpack 的情况下，您需要将其添加到vue-loader's 选项中，transformToRequire或者transformAssetUrls根据版本

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