解决vue打包之后静态资源图片失效的问题
1、问题描述
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！
2、解决方法之一
静态资源static存放位置放在src目录下
你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的
实践证明这个写法是错误的，这个会在你打包的时候直接抱一大堆错（如css-loader错误），连项目都跑不起来。
于是我用下面的写法：
这种写法也是不可以的，原因是你的静态资源文件static不在src目录，而在vue中src目录是相对根目录是src目录，所以如果你想用上面的写法，必须要把static放在src目录下。如上面图一图二
注意：不能把static/images/user.png写成 /static/images/user.png，否则图片还是失效。
以上是关于文件存放位置以及css中引入图片问题，如果是通过img标签引入图片的话，相对简单，直接写绝对地址就行了，并且静态资源static文件夹的位置可以在src里面，也可以放在与src同级下，但是为了不出现上面情况，放在src里面即可！
img引入图片：
以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方法，例如通过导入图片的方式（本人未实践），可以自行尝试！
这篇解决vue打包之后静态资源图片失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
- vue打包后显示空白正确处理方法
- Vue打包后出现一些map文件的解决方法
- 使用vue打包时vendor文件过大或者是app.js文件很大的问题
- vue打包使用Nginx代理解决跨域问题
- 解决vue打包项目后刷新404的问题
- 解决Vue打包之后文件路径出错的问题
- vue打包之后生成一个配置文件修改接口的方法
- 解决vue打包css文件中背景图片的路径问题
- 解决vue打包后vendor.js文件过大问题
- 解决vue打包后刷新页面报错：Unexpected token <
- 解决Vue打包后访问图片/图标不显示的问题
- vue打包的时候自动将px转成rem的操作方法
- 详解Vue打包优化之code spliting
- 基于vue打包后字体和图片资源失效问题的解决方法
- Vue打包后访问静态资源路径问题
- 解决Vue打包上线之后部分CSS不生效的问题
- vue打包相关细节整理(小结)
- 压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
相关文章
这篇文章主要介绍了vue2.0模拟后台json数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
我们在组件切换时经常会有传递一些数据的需求,这样就涉及到了路由传参的问题,下面这篇文章主要给大家介绍了关于vue-router传参的4种超详细方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
在实际开发中,多屏切换是常见的需求,尤其是在需要展示大量内容或信息时,下面我将向大家展示我是如何实现三屏,并通过动态按钮控制切换屏幕的,感兴趣的小伙伴跟着小编一起来看看吧2024-09-09
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
这篇文章主要给大家介绍了关于Vue.js桌面端自定义滚动条组件之美化滚动条VScroll的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue中输入框事件的使用及数值校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
ref 和 reactive都是vue3推出的针对组合式设计的声明响应式状态的API,两者在使用之前都要先进行引入,本文通过实例代码详解vue3中的ref、reactive问题,感兴趣的朋友一起看看吧2024-03-03
这篇文章主要介绍了在Vue中使用WebScoket，网络的不稳定而断开连接，webscoket不会出现异常，下面就一起进入文章看看吧2022-01-01
详解element-ui级联菜单（城市三级联动菜单）和回显问题
这篇文章主要介绍了详解element-ui级联菜单（城市三级联动菜单）和回显问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue项目build后,图片加载不出来的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论