浅谈在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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
js实现图片轮播效果
Dec 19 Javascript
javascript操作cookie
Jan 17 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
js实现每日签到功能
Nov 29 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
jquery实现手风琴案例
May 04 jQuery
详解vue 组件注册
Nov 20 Vue.js
解决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
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
php连接mysql数据库
2017/03/21 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
PHP实现百度人脸识别
2019/05/06 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
会务接待方案
2014/02/27 职场文书
投资协议书范本
2014/04/21 职场文书
积极向上的团队口号
2014/06/06 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
golang中的struct操作
2021/11/11 Golang
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Python中如何处理常见报错
2022/01/18 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
python读取mat文件生成h5文件的实现
2022/07/15 Python