webpack如何打包带有图片的npm组件库?

发布于 2022-09-13 01:03:42 字数 403 浏览 36 评论 0

一、问题

目前我们有个需求,基于vue,需要将业务组件单独提取出来,打包成一个npm包给其他项目使用,业务组件里有图片等静态资源,我应该如何打包才能让第三方使用者使用时我们的图片正确显示呢?

二、遇到的问题:

我们将组件打包后,图片的src路径都是正确的,在第三方项目使用时,这个路径在css中是可以正确显示图片的,但在图片img的src使用时就找不到了。
具体的问题如下图:
11111.png

三、打包后的代码如下图:

22222.png

四、请问打包这种业务组件的话,图片资源应该如何处理呢

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

行雁书 2022-09-20 01:03:42

两种思路:1.使用网络图片或者转base64;
2.使用lerna或者使用vue-cli的库输出模式将你的组件组织成一个完善的库。

ゃ懵逼小萝莉 2022-09-20 01:03:42

问题解决了吗?兄弟

像你 2022-09-20 01:03:42

我也遇到同样的问题,这个问题有办法解决吗?不使用base64和cdn,也不直接发布源码,还有其它方式吗,想知道img标签为啥不行的原理是啥?急啊

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文