井井客

搜索

webpack+vue中使用别名路径引用静态图片地址

定义完别名路径之后就是如何正确的使用它,例如引用静态图片地址,在vue文件中别名路径该怎么使用?当使用插件时,图片地址不一能直接写在src中时又要怎么使用?

webpack+vue中使用别名路径引用静态图片地址

这个是群里面小伙伴的问题,本来问的是关于配置别名路径是否正确的,后来我要了项目包,自己测试了下,别名路径没有问题,但是在显示图片路径上面没有正确的将别名路径显示成正确的地址。

再看了一下发现是使用了插件,路径是写在对象中一个字段,最后用于list生成到src上的。然而,这就是问题所在了。。

正常我们在引用别名路径时,会在前面加一个“~”波浪符号。所以试了一下,我直接把地址写入时:

<img src='~components/img/banner.jpg' />

渲染之后的结果正确,其中“~components”被替换成了正确的路径。而如果这样:

<img :src='item.src' />

就不能成功,渲染出来的地址就是“~components/***”。

最后还是小伙伴自己搞定,在对象中,字段值使用 src:require('~components/img/banner.jpg') 就没有问题了。

有时候还是需要多一个人,从不一样的思路来看待问题。虽然我之前也尝试使用require,但是有点心塞,并没有用对地方,导致一直不正确,还报了好多错误。

感觉自己看待解决问题的思路有点死了,还需多多学习唉。。。

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:webpack+vue中使用别名路径引用静态图片地址
本文链接:http://www.jingjingke.com/c/20278.html

上一篇:将一段数字从右到左每隔三位插入一个逗号
下一篇:[半转载]css揭秘的例子

文章分类

相关阅读

随便看看