浅谈在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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 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
PHP5 面向对象程序设计
2008/02/13 PHP
PHP面向对象法则
2012/02/23 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Django 实现图片上传和下载功能
2020/12/31 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
研究生考核个人自我鉴定
2014/03/27 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
教师考核评语大全
2014/12/31 职场文书
放飞理想主题班会
2015/08/14 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang