Vue中img的src是动态渲染时不显示的解决

今天在项目中遇到一个需求，设计稿如下

就是展示用户头像，数据从后端获取，要是没有拿到则显示默认图片。

项目采用vue开发，本人也是第一次在实际项目中使用vue。

自然而然采用条件渲染，我的代码如下：

保存运行查看，发现没显示默认的图片，审查元素发现图片没有被打包

有点懵~

后来查阅资料发现图片使用require引入即可，更改后代码为：

搞定~

以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

  • vue动态设置img的src路径实例

    相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接当做字符串了,当然网上也有很多方法,这里使用的是最有效的方法. 看代码: 使用导入资源的方式 <template> <div @click="home"> <img :src="home_url" alt="..." style="height: 10vw"

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

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

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

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

    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中img的src是动态渲染时不显示的解决

    今天在项目中遇到一个需求,设计稿如下 就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用vue. 自然而然采用条件渲染,我的代码如下: 保存运行查看,发现没显示默认的图片,审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可,更改后代码为: 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 基于Echarts图表在div动态切换时不显示的解决方式

    简单粗暴,先上图,大概长这样: 在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子: 上代码: <div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in options

  • vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    早就实现了功能,但是发现点击的时候,选中的菜单项背景色会变白,周五时候仔细观察了一下,发现并不是调整样式的问题,而是选项没有被选中,于是好好研究了一下组件递归这块,总结记录一下心路历程 一.概念 递归:递归其实说白了,就是自己调用自己,样子就像是套娃一个套一个的,小时候玩过一个游戏汉诺塔就是利用的递归原理: 函数递归:函数利用函数名还调用自己 组件递归:所以组件递归利用的是vue组件中的name属性来实现的 二.需求 实现可折叠动态渲染多级侧边栏导航 三.分析 1.观察到侧边栏导航是一级一级的,

  • Vue通过字符串关键字符实现动态渲染input输入框

    目录 问题描述 { xxx } 标识字符渲染Dom 组件设计 组件开发 重点 输入完成事件 动态编辑文本 今天做一个简单的demo,就是有一个字符串,字符串里面有标识符,前端检测到标识符之后,需要将这个标识符转换成一个 input 输入框并且进行数据输入和绑定功能. 问题描述 就比如现在有这样一个字符串: 你好,我是{name},我今年{age} 岁,我喜欢的运动是{play}. 前端需要把 {xxx} 及其包裹的内容转变成一个输入框渲染出来,并且呢,当在输入框输入数据的时候,需要对输入的内容进

  • 解决layui中onchange失效以及form动态渲染失效的问题

    最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了. 然后浏览layui社区,了解到layui监控一个控件变化有自己的方法. html <select lay-filter="test"></select> js var form = layui.form(); form.on('select(test)', function(data){ console.log(data); }); 这样操作即

  • vue中实现先请求数据再渲染dom分享

    在项目中遇到了一个问题,下面是vue template中的代码: 我之前的写法是 这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到. 原因是并没有按照 请求数据->渲染dom->获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么) 后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是

  • LayUI动态设置checkbox不显示的解决方法

    1.页面引入layui.js和layui.css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机银行权限配置</title> <link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" r

  • Vue中img的src属性绑定与static文件夹实例

    Vue中img的src属性绑定与static文件夹实例

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl }}"/> 这样写肯定是不对的,正确的写法应该使用v-bind: <img v-bind:src="imgUrl"/> 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径. 例如,有下面一个文件结构: 现在,我们要在A

  • 在vue中获取微信支付code及code被占用问题的解决方法

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu

  • 关于vue中标签的属性绑定值渲染问题

    目录 标签的属性绑定值渲染问题 最终解决办法 vue标签属性条件渲染 1.v-bind 2.v-if和v-show的区别 标签的属性绑定值渲染问题 在项目中遇到一个棘手的问题,给span标签添加title,title显示的内容就是该span标签显示的内容,且返回的内容中有html标签,需要解析出来(考虑vue的slot插槽未能实现) 最终解决办法 在绑定的title中使用过滤器,去掉内容中的标签(本项目情况特殊,返回标签固定,所以替换标签比较方便),如果大家还有其他解决办法欢迎留言~~ //te

随机推荐