vue 动态改变静态图片以及请求网络图片的实现方法

在本身的项目中需要动态请求后端图片

一般需要在created中写因为beforeCreate的时候图片过不来的，如果想在这时候请求数据那么图片的地址我们就要存在一个地方。可以是本地也可以是vuex中

静态图片想要动态的添加或者改变我们需要改变图片的目录结构

把图片放在static中然后 imgUrl :

['/static/clinical.png','/static/nursing.png','/static/function.png','/static/test.png','/static/drug.png','/static/admin.png']

绝对路径请求

以上这篇vue 动态改变静态图片以及请求网络图片的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 基于vue 动态加载图片src的解决方法
  • vue图片加载与显示默认图片实例代码
赞 (0)

相关推荐

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • vue图片加载与显示默认图片实例代码

    本文实例为大家分享了vue图片加载与显示默认图片的具体代码,供大家参考,具体内容如下 HTML: <div class="content-show-img"> <div class="show-img"> <img class="default-image" :src="data.image" @load="successLoadImg" @error="errorL

  • vue 动态改变静态图片以及请求网络图片的实现方法

    在本身的项目中需要动态请求后端图片 一般需要在created中写因为beforeCreate的时候图片过不来的,如果想在这时候请求数据那么图片的地址我们就要存在一个地方.可以是本地也可以是vuex中 静态图片想要动态的添加或者改变我们需要改变图片的目录结构 把图片放在static中然后 imgUrl : ['/static/clinical.png','/static/nursing.png','/static/function.png','/static/test.png','/static/

  • vue动态改变背景图片demo分享

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #bag{ width: 200px; height: 50

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue中本地静态图片路径写法

    这里写图片描述 需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id&

  • Vue动态生成el-checkbox点击无法赋值的解决方法

    Vue动态生成el-checkbox点击无法赋值的解决方法

    前言 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的 例如: 定义的 data 的 form 里面是空对象,需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList,这个就是动态生成的表单数据 v-for 循环 checkList,得到 key,然后直接 v

  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然

  • vue中v-for加载本地静态图片方法

    vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了): 之后v-for 动态加载图片路径就遇到了问题 源码: <ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <div><img v-bind:src="item.imageurl"/></

  • javascript动态改变img的src属性图片不显示的解决方法

    首先讲下这个bug的出现的情况,页面中有 复制代码 代码如下: <a href="javascript:void(0)" onclick="document.getElementById('current').src='images/001.jpg';"> 这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键&quo

随机推荐