问题：

<img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image"/>

解决方法：

加上require() 即可

<img :src="item.image ? require(`../../assets/image/${item.image}`) : ''" alt="image"/>

vue 之img的src是动态渲染时(即 :src=' ' )不显示 踩坑的更多相关文章

  1. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

  2. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  3. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  4. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  5. Vue.js 动态为img的src赋值

    在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了,没有进行编译 解决方法: 1.用网络地址 把图片放在cdn或自己的服务器上,把网络地址存在imgUrl里,然后直接& ...

  6. Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页

    0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...

  7. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  8. vue使用动态渲染v-model输入框无法输入内容

    最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化 解决方法: 将动态生成的表单对象,深拷贝到 data 对象中 <el-date-p ...

  9. vue动态渲染图片，引用路径需要注意的地方

    1.把图片放在和src同级的static里面,这用按照正常的方式进行引入,例如: 2.图片可以在其他文件夹,但是在script引入是必须加上require <img :src="ite ...

随机推荐

  1. 深入理解 iptables 和 netfilter 架构

    [译] 深入理解 iptables 和 netfilter 架构 Published at 2019-02-18 | Last Update 译者序 本文翻译自 2015 年的一篇英文博客 A Dee ...

  2. jmeter5实现文件上传接口测试

    背景:在公司做接口自动化编写过程中,遇到需要测试一个在线下载导入模板的接口,之前都没有接触过关于文件上传下载的接口测试,此处做个记录,为后续工作开展做个参考. 步骤: 打开浏览器按F12 手动进行文件 ...

  3. OpenCV类型对照表

    有些时候处理图像必须使用灰度图或者单波段处理,速度快,所以在处理之前就需要先判断图像类型,根据不同类型图像使用不同方法处理. 获取type值 Mat img = imread("lena.j ...

  4. JavaScript 真值和假值

    常见的假值有 值 说明 var a=false;  值为假 var a =0;  值为0 var a='';  值为空 var a=10/'abc' 算式错误 var a; 未赋值变量 常见的真值有 ...

  5. [学习笔记] Hibernate 4.3.5 下载与安装

    下载 http://hibernate.org/orm/releases/4.3/ https://sourceforge.net/projects/hibernate/files/hibernate ...

  6. SpringBoot 使用WebSocket打造在线聊天室

    教程: https://www.jianshu.com/p/55cfc9fcb69e https://wallimn.iteye.com/blog/2425666 关于websocket基础普及见:h ...

  7. 处理vue页面406问题纪要

    1.servlet-mapping url-pattern / 与 /* 的区别注意关注 2.mvc:resource 是否生效,注意关注,如不生效,可在 web.xml中配置<servlet- ...

  8. 如何使用RedisTemplate访问Redis数据结构之list

    Redis的List数据结构 这边我们把RedisTemplate序列化方式改回之前的 Jackson2JsonRedisSerializer<Object> jackson2JsonRe ...

  9. Python解Leetcode： 539. Minimum Time Difference

    题目描述:给定一个由时间字符组成的列表,找出任意两个时间之间最小的差值. 思路: 把给定的链表排序,并且在排序的同时把60进制的时间转化成十进制整数: 遍历排序的数组,求出两个相邻值之间的差值: 求出 ...

  10. 网络编程之异步IO

    Linux的I/O模型有下面几种:1. 同步阻塞I/O: 用户进程进行I/O操作,一直阻塞到I/O操作完成为止.2. 同步非阻塞I/O: 用户程序可以通过设置文件描述符的属性O_NONBLOCK,I/ ...