腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用node_modules中的SVG

问使用node_modules中的SVG
EN

Stack Overflow用户

提问于 2020-05-29 00:36:34

回答 1查看 1.2K关注 0票数 3

我创建了一个带有所有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>

Nor

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

救命！！

vue.js

svg

quasar-framework

javascript

node.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-29 01:22:18

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

您必须手动调用require。This is what vue-loader does internally。

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62081876

复制

相似问题

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

问使用node_modules中的SVG
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用node_modules中的SVGEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用node_modules中的SVG
EN