vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决

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

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

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

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

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

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

有点懵~

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

搞定~

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

时间： 2019-11-13

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

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

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

先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind

v-for在线测试实例

vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决相关推荐

vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法
最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面 ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
vue如何获取tree当前选中的节点_vue中element-ui 树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
出处: Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 1 这种只有在所有子 ...
vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
Android 华为手机获取相册图片路径，获取不到问题
未经本人授权,不得转载!否则必将维权到底有个需求,可以从系统相册选择图片,上传到服务器.那么选择从系统相册选择完图片后,图片的名字需要显示在页面上.这里出了个 Bug,华为手机用系统的方法,获取相册 ...
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
解决Vue打包后背景图片路径错误问题
1.原因解析当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
php 获取html中图片不显示,HTML中img标签src属性用PHP设置后不显示
我想用php获取数据库里的图片路径之后,用img标签显示出来但是并没有成功,也没有报错. 下面是php代码: `<?php /* 包含连接数据库文件 */ include_once(" ...
解决华为手机获取相册图片路径为null
最近代码君遇到一个问题,在其他手机调用系统相册获取图片路径都是可以的,但是华为手机,执行相同代码,会报空指针异常,网上找了很多资料,都没什么实用的效果 Intent intent; intent = ...

vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决

vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决相关推荐

最新文章

热门文章