vue css 引入asstes中的图片无法显示的四种解决方法

网络编程 2024/9/22 佚名

3 1 2

这里主要针对的是vuecli2中的一些问题。
vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets
关于这两者之间的区别，和如何选择这里就不多说了！
这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！
正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！
这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是斜杆（/）,代表资源根目录，也就是dist目录下与index.html文件同级。

所以：

第一种方法

修复的方法就是把这个值改回默认值：/

打包出来的结果： css文件中background属性

index.html中的js和css文件

第二种方法

还是修改这个值斜杠代表的是根目录，我们换种思路，是不是可以把这里该为绝对地址呢？答案肯定是可以的具体怎么改呢？举个例子，比如我的线上的项目的地址是：http://www.test.com，我们只需要吧之前的斜杠替换成这个地址就可以了，如图：

打包出来的结果： css文件中background属性

index.html中的js和css文件

第三种方法

上面也说了，可能由于某些原因我们修改了这个值，为了不影响原有的功能，也是避免造成别新的bug，我们不能修改这个值，所以我们有了第三种方法。修改build目录中的uitls文件中的css打包配置，打开utils.js文件直接搜索 ExtractTextPlugin.extract 然后在对象中添加属性 publicPath: ‘…/…/' 具体如图：

这里的层级（publicPath: ‘…/…/' ）具体看你打包后的目录结构，我这里的层级如下图，各自根据自己的情况确定

这个时候打包出来的路径，根据你的assetsPublicPath配置而定了，这里就不举例了，执行查看是否打包正常。

第四种方法

前面三种方案都是说的老项目，已经大量的图片引入，没有办法了。但是若果图片资源不多，或者是新项目，这个时候的话不需要这么麻烦去改打包配置。我们可以从一开始就避免这个问题。对于html中的img标签我们可以通过import的方式先把图片引入，然后放到data中，在绑定到src上。

import logo from "../assets/logo.png";
data() {
 return {
 logo，
 };
},

css中的路径我们可以通过@来引入（@等价于src目录）比如：

background: url("@/assets/logo.png") no-repeat;

又或者，直接不要放到asstes目录下，也可以避免这个问题发生。

总结

vue,css,引入asstes,图片,vue引入asstes,图片无法显示

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“vue css 引入asstes中的图片无法显示的四种解决方法”

暂无评论...

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

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

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

vue css 引入asstes中的图片无法显示的四种解决方法

JS函数参数的传递与同名参数实例分析

JS函数本身的作用域实例分析

评论“vue css 引入asstes中的图片无法显示的四种解决方法”

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

更新日志

友情链接