时间戳

首页 > 解决方案 > 使用来自 node_modules 的 SVG

javascript - 使用来自 node_modules 的 SVG

问题描述

我创建了一个包含所有 svg 文件的 node_module 来模块化我们的架构。

当我使用以下方法调用它时它工作正常：

<q-icon>
  <svg>
    <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use>
  </svg>
</q-icon>

但是，当这样做时：

<q-icon>
  <svg>
    <use :xlink:href="'~svgmodule/svgs/icons.svg#' + iconParameter"></use>
  </svg>
</q-icon>

并且iconParameter定义如下：

iconParameter: 'addicon'

这是我得到的错误：

vue.runtime.esm.js?0594:6757 GET http://localhost:8080/~svgmodule/svgs/icons.svg net::ERR_ABORTED 404 (Not Found)

我也试过这个并且它有效：

<use xlink:href="../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon"></use>

但是这个没有：

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#' + iconParameter"></use>

也不

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon'"></use>

帮助！！

标签： javascriptnode.jsvue.jssvgquasar-framework

解决方案

vue-loader不会将表达式转换为 webpack 模块请求。

您必须手动调用require. 这就是vue-loader内部所做的。

<q-icon>
  <svg>
    <use :xlink:href="require('~svgmodule/svgs/icons.svg') + '#' + iconParameter"></use>
  </svg>
</q-icon>

推荐阅读