使用node_modules中的SVG
提问于 2020-05-29 00:36:34
我创建了一个带有所有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>救命！！
回答 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62081876
复制相关文章
腾讯云开发者
