Vuejs图片编译后失败的问题

问题: (vue.js)vue-cli 打包之后图片引用路径;
描述:
这是我的组件的路径;
./src/components/home目录下;

image.png

图片的路径:
./static/img目录下;

image.png

当我在开发的时候,引用图片的时候路径需要这样写(home组件中引用图片):

image.png

我需要回退两个路径才可可以访问到./static/img下的图片;
问题:
当我npm run build 之后;生成的html中;home组件引用的图片路径也会回退两个路径;这样就报错了;
打包之后的图片地址不用回退两个路径,因为他们就在./static/img目录下,html文件和static是同级目录;

image.png
image.png

栗子:
这是我在home文件中引用的背景图片的地址:

image.png

右键在新网页打开图片的路径:

image.png

beta/static/css/static/img/.jpg
正确的路径应该是:
beta/static/img/
.jpg;
这里被加上了/static/css,不知道怎么回事。
webpack的配置中:

image.png

这个是怎么打包的。。。。

image.png
解决方案1:
把你的图片资源放到static文件下,不论你是在vue文件中,还是在css文件中都这样使用:
![](/static/img/...)
background:url('/static/img/...)
这样打包之后就不会出现图片路径错误了,否则vue-cli不会给你一个static文件夹啊,是不是
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,581评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • 201611191214ZCL 自从SDN火了以后,很多文章都说网络工程师失业了,CLI没用了。以后都是软件配置,...
    taoza阅读 855评论 0 1
  • 感情到这吧,这次我选尊严
    嗯哼mouse阅读 324评论 0 0
  • 个人十分喜欢逛各种软件应用,现总结如下: 小众软件网 小众软件的编辑则本着“免费、小巧、实用、有趣、绿色”的宗旨在...
    墨狂之逸才阅读 1,133评论 0 51