问题：

<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. swift 第二课 基础知识-2

    setter 和getter 的使用--> 适合计算使用 struct Point { var x = 0.0, y=0.0 } struct Size { var width = 0.0, h ...

  2. pip安装pillow——死循环：[WinError5] & [TypeError:'module' object is not callable]

    1.这次本来要安装个pillow,记得以前装了的,怎么这次就不行了.然后,下意识的使用:pip3 install pillow. 发现报错: [TypeError:'module' object is ...

  3. Linux生成ssh密钥免密登录，允许/禁止密码登录，允许/禁止root远程登录，更改ssh端口

    进入想要使用密钥登录的用户家目录 cd 或 cd ~ 执行密钥创建命令,不行可能需要下载openssh-server与openssh-client ssh-keygen -t rsa -P " ...

  4. 亿级mongodb数据迁移

    1. 预先准备有效数据单号池,通过单号拉取数据处理 单号表默认为1 01 使用findAndModify 更新单号表状态为 2 读取单号 循环读取100 条 02 通过运单号批量查询 Aladin_W ...

  5. VS.vs15

    1.20190615 安装的 vs2015(cn_visual_studio_enterprise_2015_with_update_3_x86_x64_dvd_8923298.iso) 的目录为: ...

  6. Velocity 数值格式化（NumberTool工具类）：保留两位小数和格式化千分位、取整

    Velocity 自带的工具类:NumberTool 实现数字格式化:保留两位小数和格式化千分位,以及取整. NumberTool 的 format(String format, Object obj ...

  7. Reactor系列(三)创建Flux,Mono(续)

    创建Mono 视频讲解:https://www.bilibili.com/video/av78944069/ FluxMonoTestCase.java package com.example.rea ...

  8. 初识 docker

    一.安装Docker 我使用的是腾讯云上的centos 7. docker -v 查看是否已经安装有docker 如果有 systemctl stop docker 停止docker服务 查看当前版本 ...

  9. (模板)poj2947（高斯消元法解同余方程组）

    题目链接:https://vjudge.net/problem/POJ-2947 题意:转换题意后就是已知m个同余方程,求n个变量. 思路: 值得学习的是这个模板里消元用到lcm的那一块.注意题目输出 ...

  10. 【3.4】innodb存储引擎

    [1]Innodb 与 Myisam 的区别 1.InnoDB支持事物,而MyISAM不支持事物 2.InnoDB支持行级锁,而MyISAM支持表级锁 3.InnoDB支持MVCC, 而MyISAM不 ...