浅谈在vue-cli3项目中解决动态引入图片img404的问题


Posted in Javascript onAugust 04, 2020

博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon。

本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~),给出效果图:

浅谈在vue-cli3项目中解决动态引入图片img404的问题

就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码,再根据当前城市状态码找到这个对应的天气图标icon~~

按照一般的开发模式,静态图片路径是相对路径还是绝对路径都可以,因为图片路径是静态的是死的,所以webpack去找这个图片路径的时候是能找到的。

但是博主这个路径是动态的,博主在computed给出一个拼接了变量的路径,项目启动在浏览器下死活出不了这个图片,死活都是404~~~

浅谈在vue-cli3项目中解决动态引入图片img404的问题

就是上述这样的路径是不行的,一直是404,原因也讲了点,vue-cli3中内置的webpack会把图片当做一个模块引用,然后打包等等,路径就不对了,我们的静态资源是不需要打包等等的,

静态资源是直接被webpack copy到对应的静态资源文件夹下,所以根本原因就在于,用了动态路径的图片,webpack将它认作为一个模块打包了,路径错乱,所以404。

找到了原因就很简单了,解决这个动态路径图片404的方案其实vue-cli3官网就有写过(vie官方人员还是相当靠谱的,虽然坑也多~~~)

vue-cli3的官方解决方案

其实很简单:

1.

浅谈在vue-cli3项目中解决动态引入图片img404的问题

引入项目的根路径前缀 baseUrl

baseUrl: process.env.BASE_URL

2.

浅谈在vue-cli3项目中解决动态引入图片img404的问题

浅谈在vue-cli3项目中解决动态引入图片img404的问题

把你所用的动态图片img放到public目录下

3.

浅谈在vue-cli3项目中解决动态引入图片img404的问题

修改你的动态路径图片地址

fullUrl: function() {
  // `this` 指向 vm 实例
  return `${this.baseUrl}cond-icon-heweather/${this.twCode}.png`;
 }

4.

浅谈在vue-cli3项目中解决动态引入图片img404的问题

将图片路径绑定到你的页面上去,这里博主还加了一个sync修饰词,有兴趣的同学去研究一下这个sync干什么用的。点我

这样就可以解决引入动态图片img404这个令人头疼的问题啦~

以上这篇浅谈在vue-cli3项目中解决动态引入图片img404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
解决vuecli3中img src 的引入问题
Aug 04 #Javascript
简介JavaScript错误处理机制
Aug 04 #Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 #Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
如何选购合适的收音机
2021/03/01 无线电
用 php 编写的日历
2006/10/09 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
Js组件的一些写法
2010/09/10 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Python使用struct处理二进制的实例详解
2017/09/11 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python实现kmp算法的实例代码
2019/04/03 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
黄金搭档广告词
2014/03/21 职场文书
继承权公证书
2014/04/09 职场文书
餐饮投资计划书
2014/04/25 职场文书
食品安全承诺书
2014/05/22 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
服务标语口号
2014/07/01 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技