在文件里引用目录文件下的静态资源图片不显示

问题:两种图片路径的指定方式,第一种能展示图片但第二种不能
两个 示例中,图片展示的差异。
在第一个示例中,图片路径是硬编码在 标签的 src 属性中的:

<img src="../../assets/img/header01.png" style="width: 100%; height: auto;" />

这种方式直接指定了图片相对于当前文件的路径,浏览器可以直接加载并显示图片。

然而,在第二个示例中,通过 Vue 的数据绑定功能来动态设置图片路径:

<img :src="scope.row.img" style="width: 100%; height: auto;" />

能展示图片:

<el-table :data="tableData" style="width: 60%;font-size: 16px;color: black"><el-table-column prop="img" label="" width="180"><template #default="scope"><img src="../../assets/img/header01.png" style="width: 100%; height: auto;" /></template></el-table-column></el-table>

但问题代码(scope.row.img不能展示图片):
并且,在 tableData 中,为 img 属性分配了一个相对路径字符串:

<div class="bottom-contain"><el-table :data="tableData" style="width: 60%;font-size: 16px;color: black"><el-table-column prop="img" label="" width="180"><template #default="scope"><img :src="scope.row.img" style="width: 100%; height: auto;" /></template>
{  img: '../../assets/img/header1.png',  title: '公司電話',  contain: '+1233333',  
}

这里的问题可能在于,使用 Webpack 或类似的模块打包器时,相对路径字符串 ‘…/…/assets/img/header1.png’ 可能不会被正确处理为有效的 URL。Webpack 通常期望在 JavaScript 文件中使用 require 或 import 来引入静态资源,这样它就可以将资源路径转换为打包后的输出路径。
所以直接在文件里引用目录文件下的静态资源图片;

import header01 from '../../assets/img/header1.png';
{img: header1,title: '公司電話',contain: '+1233333',},

成功拿到图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

线性可分支持向量机的原理推导 线性分隔超平面关于任意样本点 (x_i,y_i)的函数间隔 公式解析

本文是将文章《线性可分支持向量机的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 公式 9-1 用来表达训练集样本点 ( x i , y i ) (\mathbf{x}_i, y_i) (xi​,yi​) 到线性可分支持向量机分离超平面的距离。 d ^ i y i ( w ⋅ x i b )…

配置websocket消息代理类AbstractBrokerRegistration

在Spring Framework的Spring Messaging和Spring WebSocket模块中&#xff0c;StompBrokerRelayRegistration、SimpleBrokerRegistration和AbstractBrokerRegistration是用于配置WebSocket消息代理&#xff08;broker&#xff09;的关键类。这些类通常在配置WebSocket消息代理时…

【学习笔记】网络设备(华为交换机)基础知识 9 —— 堆叠配置

提示&#xff1a;学习华为交换机堆叠配置&#xff0c;含堆叠的概念、功能、角色、ID和优先级&#xff1b;堆叠的建立过程以及注意事项&#xff1b;包含堆叠的配置命令&#xff0c;以及堆叠的配置案例 一、前期准备 1.已经可以正常访问交换机的命令行接口 Console口本地访问教…

解码专业术语——应用系统开发项目中的专业词汇解读

文章目录 引言站点设置管理具体要求包括&#xff1a; Footer管理基于URL的权限控制利用数据连接池优化数据库操作什么是数据连接池&#xff1f;优化的优势 利用反射改造后端代码&#xff0c;AJAX反射的作用及其在后端代码中的应用AJAX 实现前后端无刷新交互 引言 创新实践项目二…

『完整代码』按钮开关UI界面

创建按钮Button 作为开关坐骑UI界面的按钮 创建Image 作为坐骑UI界面 在父类脚本添加其中函数即可 绑定脚本在父类窗口对象 在按钮上响应事件 隐藏UI界面 运行项目 - 实现点击按钮开关UI界面 再次点击按钮 - 关闭UI界面 end

青少年编程能力等级测评CPA C++ 四级试卷(1)

青少年编程能力等级测评CPA C 四级试卷&#xff08;1&#xff09; 一、单项选择题&#xff08;共15题&#xff0c;每题3分&#xff0c;共45分&#xff09; CP4_1_1.在面向对象程序设计中&#xff0c;与数据构成一个相互依存的整体的是&#xff08; &#xff09;。 A. 对数据…

想让前后端交互更轻松?alovajs了解一下?

作为一个前端开发者&#xff0c;我最近发现了一个超赞的请求库 alovajs&#xff0c;它真的让我眼前一亮&#xff01;说实话&#xff0c;我感觉自己找到了前端开发的新大陆。大家知道&#xff0c;在前端开发中&#xff0c;处理 Client-Server 交互一直是个老大难的问题&#xff…

那些年,为了拿高薪看过的面试题

1. 计算机网络 1、什么是计算机网络 2、什么是协议 3、什么是IP地址 4、什么是子网 5、什么是DNS 6、什么是NAT 7、什么是带宽和延迟 8、什么是VPN 9、路由器和交换机的区别 10、OSI与TCP/IP模型 11、TCP与UDP的区别 12、TCP三次握手四次挥手 13、HTTP和HTTPS的区…

member access within null pointer of type ‘ListNode‘

文章目录 前言一、空指针解引用二、访问已释放的内存三、 结构体定义问题四、错误的链表操作五、代码上下文六、示例代码七、调试建议 前言 p -> next p1; p1 p1 -> next; p p->next;runtime error: member access within null pointer of type ListNode如果出现…

编辑器加载与AB包加载组合

解释&#xff1a; 这个 ABResMgr 类是一个资源加载管理器&#xff0c;它用于整合 AB包&#xff08;Asset Bundle&#xff09;资源加载和 编辑器模式资源加载。通过这个管理器&#xff0c;可以根据开发环境选择资源加载方式&#xff0c;既支持 运行时使用Asset Bundle加载&…

leetcode hot100【LeetCode 234. 回文链表】java实现

LeetCode 234. 回文链表 题目描述 请判断一个链表是否为回文链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;false进阶&#xff1a; 你能否用 O(n) 时间复杂度和 O(1) …

【C++训练营】现代C++编程(隐藏)

一、面向对象的特性 1.1 编码规范 1.1.1 效率 时间/空间&#xff1a;计算相关逻辑的时间复杂度和空间复杂度内存&#xff1a;考虑内存占用和cache命中率堆/栈&#xff1a;从生存周期、内存管理复杂性、对象大小等角度来考虑堆栈应用存储&#xff1a;考虑存储护具方式和读取方…

使用docker-compose搭建redis7集群-3主3从

下面是一个用于搭建 Redis 集群的 docker-compose.yml 示例文件&#xff0c;它会启动 6 个 Redis 节点&#xff08;3 主节点 3 从节点&#xff09;来构成一个最小的 Redis 集群。 同一个容器内网通讯没问题&#xff0c;但是你要是需要暴露到外网你需要用第二个yml 内网的 v…

信雅纳Chimera 100G网络损伤仪助力Parallel Wireless开展5G RAN无线前传网络的损伤模拟

背景介绍 Parallel Wireless 为移动运营商提供唯一全覆盖的(5G/4G/3G/2G&#xff09;软件支持的本地 OpenRAN (ORAN) 解决方案。该公司与全球 50 多家领先运营商合作&#xff0c;并被 Telefonica 和 Vodafone 评为表现最佳的供应商。Parallel Wireless 在多技术、开放式虚拟化…

从头学PHP之运算符

关于运算符的图片均来自网络&#xff0c;主要是自己写太麻烦了&#xff0c;程序是个简化自己工作量的方式&#xff0c;能复制粘贴就不要手写了&#xff08;建议初期还是多写写&#xff0c;加深下记忆&#xff09;在这里我就偷个懒&#xff0c;图片涉及到侵权及时&#xff0c;请…

安全见闻(3)——开阔眼界,不做井底之蛙

内容预览 ≧∀≦ゞ 安全见闻三&#xff1a;脚本程序与病毒声明导语脚本语言BAT/PowerShell脚本木马与宏病毒脚本病毒BIOS病毒 结语 安全见闻三&#xff1a;脚本程序与病毒 声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只…

死循环等待 vs 同步锁

在Java并发编程中&#xff0c;破坏占用且等待条件是一种避免死锁的策略。关于你提到的方法和synchronized(Account.class)的比较&#xff0c;这里有一些点需要考虑&#xff1a; 死循环等待 vs 同步锁: 使用死循环等待&#xff08;while(!actr.apply(this, target))&#xff09…

实现酒店搜索框自动补全

前言 现在&#xff0c;hotel索引库还没有设置拼音分词器&#xff0c;需要修改索引库中的配置。但是知道索引库是无法修改的&#xff0c;只能删除然后重新创建。 另外&#xff0c;需要添加一个字段&#xff0c;用来做自动补全&#xff0c;将brand、suggestion、city等都放进去…

小程序无法获取头像昵称以及手机号码

用户在使用小程序的时候&#xff0c;登录弹出获取昵称头像或者个人中心点击默认头像弹窗获取头像昵称的时候&#xff0c;点击弹窗中的头像昵称均无反应&#xff0c; 这个是因为你的小程序隐私政策没有更新&#xff0c;或者老版本没有弹窗让用户同意导致的 解决办法&#xff1…

SpringBoot:举例说明如何使用@ControllerAdvice处理全局异常

使用RestController开发web接口时&#xff0c;需要处理Controller层未捕获的异常&#xff0c;提高系统的健壮性。 一般常用的方式是采用ControllerAdvice和ExceptionHandler&#xff0c;举例如下&#xff1a; ControllerAdvice public class ControllerAdvice {ExceptionHand…