问题：

<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. 关于运维之故障复盘篇-Case Study

    关于故障的事后复盘,英文名 Case Study是非常有必要做的,当然是根据故障的级别,不可能做到每个故障都Case Study,除非人员和时间充足: 文档能力也是能力的一种,一般工程师的文档能力比较 ...

  2. Product - 产品经理 - 知返

    特别说明 本文是已读书籍的学习笔记和内容摘要,原文内容有少部分改动,并添加一些相关信息,但总体不影响原文表达. - ISBN: 9787568041591 - https://book.douban. ...

  3. dp[2019.5.25]

    1.实例计算(写出计算过程): 1)对维数为序列<5, 10, 3, 12, 5, 50, 6>的各矩阵,找出其矩阵链乘积的一个最优加全部括号. 这是一个矩阵连乘问题,基本知识可以参考: ...

  4. [Python[PyQt]] ModuleNotFoundError: No module named 'PyQt5.QtWebEngineWidgets'

    解决办法: pip install PyQtWebEngine

  5. 【转载】恢复误删文件--DOS命令应用实例（一）

    <电脑爱好者>报转载第一辑第二篇之恢复误删文件--DOS命令应用实例(一)                             恢复误删文件--DOS命令应用实例(一) 上期我们讲述了 ...

  6. java_guide_类加载器

    类加载器总结 JVM 中内置了三个重要的 ClassLoader,除了 BootstrapClassLoader 其他类加载器均由 Java 实现且全部继承自java.lang.ClassLoader ...

  7. 31.网络协议介绍tcp/udp

    网络协议 TCP:网络中传输数据的协议,打电话 解决了我可能在网络中找不到别人(数据无法传输到) 保证数据传输的稳定性,可靠性 保证数据的安全性,完整性 对方要有响应 尝试重新发送 UDP:传输数据的 ...

  8. HDU4513 【mannacher算法】

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=4513 Problem Description 吉哥又想出了一个新的完美队形游戏! 假设有n个人按顺序站在 ...

  9. [LuoguP2157][SDOI2009]学校食堂_状压dp

    学校食堂 题目链接:https://www.luogu.org/problem/P2157 数据范围:略. 题解: 发现$B$特别小,很容易想到状压. 即在$dp$的时候弄出来$f_{(i,j,k)} ...

  10. JSP和Servlet异常处理转发

    <error-page> <!-- 指明异常类型. --> <exception-type>java.lang.ArrayIndexOutOfBoundsExcep ...