DDR爱好者之家 Design By 杰米

1、问题描述

在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式!

2、解决方法之一

静态资源static存放位置放在src目录下

解决vue打包之后静态资源图片失效的问题 

解决vue打包之后静态资源图片失效的问题

你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同级目录下,但是在某个css文件中引入背景图片的时候打包之后图片失效,我是这样引入的

解决vue打包之后静态资源图片失效的问题 

实践证明这个写法是错误的,这个会在你打包的时候直接抱一大堆错(如css-loader错误),连项目都跑不起来。

于是我用下面的写法:

解决vue打包之后静态资源图片失效的问题 

这种写法也是不可以的,原因是你的静态资源文件static不在src目录,而在vue中src目录是相对根目录是src目录,所以如果你想用上面的写法,必须要把static放在src目录下。如上面图一图二

注意:不能把static/images/user.png写成 /static/images/user.png,否则图片还是失效。

以上是关于文件存放位置以及css中引入图片问题,如果是通过img标签引入图片的话,相对简单,直接写绝对地址就行了,并且静态资源static文件夹的位置可以在src里面,也可以放在与src同级下,但是为了不出现上面情况,放在src里面即可!

img引入图片:

解决vue打包之后静态资源图片失效的问题 

以上是一种解决图片失效问题的方法,当然,如果非要把static静态资源目录放在与src同级目录下,也是有解决方法,例如通过导入图片的方式(本人未实践),可以自行尝试!

这篇解决vue打包之后静态资源图片失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。