Vue3动态加载图片

news/2024/7/10 1:08:07 标签: vue, java, js

vue3从数据库中获取文件路径后动态载入到页面中的方法为:

vue"><el-table-column label="图片" width="150">
  <template #default="scope">
  <img :src="require('../assets/goodsImage/'+scope.row.image+'.jpg')" class="image" alt>
  </template>
</el-table-column>

注意:在动态加载图片时,必须使用require函数,传入图片的相对路径,并且,require函数中不能直接传入变量的值。例如,

vue"> <img :src="require(scope.row.image)" class="image" alt>

这会导致图片加载失败!!!

必须使用字符串拼接的方法进行传参。

本文中,数据库内容如下:

在这里插入图片描述vue项目目录结构为:
在这里插入图片描述
图片加载成功!
在这里插入图片描述
参考:
https://blog.csdn.net/qq_29869111/article/details/100154941


http://www.niftyadmin.cn/n/642831.html

相关文章

QT creator实现串口通信操作方法

QT creator实现串口通信操作方法 虚拟串口软件模拟了两个串口&#xff0c;并且互相连通的&#xff0c;就是从com7发送的数据&#xff0c;com8可用接收&#xff0c;反过来也一样。 软件使用com7&#xff0c;串口调试工具使用com8&#xff0c;就可以测试软件的运行情况 安装虚拟…

很火的一首小诗

纽约时间比加州时间早三个小时&#xff0c;New York is 3 hours ahead of California,但加州时间并没有变慢。but it does not make California slow.有人22岁就毕业了&#xff0c;Someone graduated at the age of 22,但等了五年才找到好的工作&#xff01;but waited 5 years…

Vue item_14 之slot详解

好的代码会说话&#xff0c;码上见 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-U…

SSM(spring + spring mvc + mybatis)核心配置

这两天编写了SSM各核心配置文件&#xff0c;真的是踩坑无数。所以写了这个教程&#xff0c;希望能帮大家避免踩雷。如果有错误的地方&#xff0c;希望各位大佬批评指正。 &#xff08;小声bb&#xff1a;还是springboot好用&#xff09; 1. 总体框架(项目结构) 2. 正式开始配置…

BZOJ2694:Lcm——包看得懂/看不懂题解

http://www.lydsy.com/JudgeOnline/problem.php?id2694Description 对于任意的>1的n gcd(a, b)不是n^2的倍数 也就是说gcd(a, b)没有一个因子的次数>2Input 一个正整数T表示数据组数 接下来T行 每行两个正整数 表示N、MOutput T行 每行一个整数 表示第i组数据的结果Samp…

交换机的级联、堆叠和集群

随着计算机数量的增加、网络规模的扩大&#xff0c;在越来越多的局域网环境中&#xff0c;交换机取代了集线器&#xff0c;多台交换机互连取代了单台交换机。在多交换机的局域网环境中&#xff0c;交换机的级联、堆叠和集群是3种重要的技术。级联技术可以实现多台交换机之间的互…

laravel之Eloquent关联

定义 模型 用对象表示的表实例&#xff0c;负责与数据库的交互逻辑构建关联模型 要连接到的最终模型关联方法 返回一个关联关系的方法 关联属性 $with属性 由关联方法名组成的数组,通常用于渴求式加载 连接表 又称中间表&#xff0c;通常用于多对多关系主键 模型的唯一标识符外…

QT tcpserver启动监听SIGSEGV错误

QT tcpserver启动监听SIGSEGV错误 --------------------------- Signal Received --------------------------- <p>The inferior stopped because it received a signal from the operating system.<p><table><tr><td>Signal name : </td>…