解决Vue动态加载本地图片问题

2024-02-10 01:04:13

最近遇到了个问题，用v-bind动态绑定img的src，图片加载不出来。控制台显示src是有获取到图片地址的，可是就是加载不出来。

最后才发现原因原来是浏览器中直接显示'./img/img1.png'，也就是没有经过编译的步骤，直接将获取到的数据当作字符串显示。

解决方法：

1.在当前界面全局import图片地址

//使用import引入
import img1 from './img/img1.png'
import img2 from './img/img2.png'

export default {
  data() {
    return {
      imgList[
          {
            id: 0,
            imgUrl: img1
          },
          {
            id: 1,
            imgUrl: img2
          }
          ]
         }
       }
     }

在Html中使用

<img v-for="item in imgList" :key="item.id" :src="imgUrl" />

2.使用require

用第一种方法可能会很繁琐，数据多的时候就不好一个一个import了，此时用require动态加载

getImage() {
  this.imgList.forEach(item => {
    item.imgUrl = require('./img/' + item.name + '.png')
    })
  }

data里的数据（此方法就不用再import啦）

data() {
    return {
      imgList[
          {
            id: 0,
            name: 'img1',
            imgUrl: ''
          },
          {
            id: 1,
            name: 'img2',
            imgUrl: ''
          }
          ]
       }
    }

以上方法就可以解决图片动态绑定后不能显示的问题啦，视频同理哟！

总结

以上所述是小编给大家介绍的解决Vue动态加载本地图片问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue中img src 动态加载本地json的图片路径写法

目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu
基于vue 动态加载图片src的解决方法

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

什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i
vue src动态加载请求获取图片的方法

一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, routers: this.$router.options.routes } } 3. 在需要的地方引入图片 <div class="avatar"><img :src="formData
vue后台管理之动态加载路由的方法

在这里我们将会实现一个vue动态路由的案列,当用户登陆成功后,根据用户的角色,拿到他对应的菜单信息,并将它动态的载入到我们的路由中. 我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制.同样的我们也需要实现一个这样的功能. 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现. 一.思路在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户
详解VueJs异步动态加载块

首先定义组件为异步加载 define(['jquery','vue'],function($,Vue){ Vue.component('comp1',function(resolve){ require(['component/comp1'],resolve); }); Vue.component('comp2',function(resolve){ require(['component/comp2'],resolve); }); var b = new Vue({ el:"#app"
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登
解决Vue动态加载本地图片问题

最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示. 解决方法: 1.在当前界面全局import图片地址 //使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export defa
vue动态加载本地图片的处理方法

发现问题今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个img标签在html中是这么写的: <img src="../images/demo.png"> 这种写法只能引用相对路径下的图片.不能使用绝对路径.使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理. 如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定. <img :src="src"> //data中
Unity 从Resources中动态加载Sprite图片的操作

我就废话不多说了,大家还是直接看代码吧~ public Sprite LoadSourceSprite(string relativePath) { //Debug.Log("relativePath=" + relativePath); //把资源加载到内存中 Object Preb = Resources.Load(relativePath, typeof(Sprite)); Sprite tmpsprite = null; try { tmpsprite = Instantiat
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动态加载SVG文件并修改节点数据的操作代码

先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击交互. 初接触的时候,觉得根本没法下手呀,说说自己的思路叭, 从随着用户点击放大缩小位置不变,想到了SVG 但是需要动态加载进来呀,而且还需要需求不同节点的电流值, 从放大缩小来看, 首先想到的是 D3 在集合领导给的部分相关资料综上: 进行了可行性的方案试探,也完成了整个功能的开发. 且听我细细
解决layui动态加载复选框无法选中的问题

问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法--自己写一个复选框  <td> <div class="la
Vue动态加载异步组件的方法

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好
JQ获取动态加载的图片大小的正确方法分享

有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.错误的代码是:(错误)在添加了HTML之后立即调用代码获取尺寸复制代码代码如下: var html = ''; $('#my_div').html(html); var width = $('#my_div img').width(); //

解决Vue动态加载本地图片问题

相关推荐

随机推荐