Question

在我的vue-cli项目中，我需要引用<img>标签中的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文件中的路径？

可能的解决方法： *将arcade-bg-4.jpg放在/public中，并在xlink:href中引用 *在<svg>

中使用内联-MyComponent.vue

但是我想保留<img />-tag，并且还要保留vue-cli中的文件哈希功能。

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

Answer 1

您应该只使用href的{{1}}中的xlink:href而不是<image>

或

您需要像这样使用v-bind和require <svg>

或

对于Webpack，您需要根据版本将其添加为<image ... :href="require('@/assets/arcade-bg-4.jpg')" />或options的vue-loader's transformAssetUrls

transformToRequire

在<img src=""/>

1 个答案: