浅谈在vue-cli3项目中解决动态引入图片img404的问题
博主最近手头再做一个项目，需要调用天气接口，并且还要动态显示天气相关图片icon。
本来以为没什么大问题，结果硬生生被这个动态图片路径搞得民不聊生（博主还是 too young，too simple~），给出效果图：
就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码，再根据当前城市状态码找到这个对应的天气图标icon~~
按照一般的开发模式，静态图片路径是相对路径还是绝对路径都可以，因为图片路径是静态的是死的，所以webpack去找这个图片路径的时候是能找到的。
但是博主这个路径是动态的，博主在computed给出一个拼接了变量的路径，项目启动在浏览器下死活出不了这个图片，死活都是404~~~
就是上述这样的路径是不行的，一直是404，原因也讲了点，vue-cli3中内置的webpack会把图片当做一个模块引用，然后打包等等，路径就不对了，我们的静态资源是不需要打包等等的，
静态资源是直接被webpack copy到对应的静态资源文件夹下，所以根本原因就在于，用了动态路径的图片，webpack将它认作为一个模块打包了，路径错乱，所以404。
找到了原因就很简单了，解决这个动态路径图片404的方案其实vue-cli3官网就有写过（vie官方人员还是相当靠谱的，虽然坑也多~~~）
其实很简单：
1.
引入项目的根路径前缀 baseUrl
baseUrl: process.env.BASE_URL
2.
把你所用的动态图片img放到public目录下
3.
修改你的动态路径图片地址
fullUrl: function() {
// `this` 指向 vm 实例
return `${this.baseUrl}cond-icon-heweather/${this.twCode}.png`;
}
4.
将图片路径绑定到你的页面上去，这里博主还加了一个sync修饰词，有兴趣的同学去研究一下这个sync干什么用的。点我
这样就可以解决引入动态图片img404这个令人头疼的问题啦~
以上这篇浅谈在vue-cli3项目中解决动态引入图片img404的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue组合式API浅显入门示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
VSCode前端Vue项目引入Element-ui组件三步简单操作方法
elementui相当于一个库,封装好的内容,我们引入到vue项目中,就可用库中的内容,这篇文章主要给大家介绍了关于VSCode前端Vue项目引入Element-ui组件的三步简单操作方法,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了Vue中的自定义渲染器和异步渲染的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下2022-11-11
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了详解VUE单页应用骨架屏方案，详细的介绍了什么是骨架屏以及是宪法方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
Hook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能，本文重点给大家介绍Vue Hook Event 解读，感兴趣的朋友一起看看吧2023-01-01
vue3使用threejs实现3D卡片水平旋转效果的示例代码
这篇文章主要介绍了在vue3中使用threejs实现3D卡片水平旋转效果,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue自定义filters过滤器的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
这篇文章主要介绍了Vue3 props的使用详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-10-10
最新评论