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

问题:两种图片路径的指定方式,第一种能展示图片但第二种不能
两个 示例中,图片展示的差异。
在第一个示例中,图片路径是硬编码在 标签的 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,一经查实,立即删除!

相关文章

【学习笔记】网络设备(华为交换机)基础知识 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

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

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

【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;请…

实现酒店搜索框自动补全

前言 现在&#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…

UML外卖系统报告(包含具体需求分析)

1、系统背景 随着互联网技术的快速发展&#xff0c;外卖订餐服务逐渐成为人们生活中的一部分。传统的电话订餐方式面临诸多不便和限制&#xff0c;而基于互联网的外卖订餐系统则提供了更加便捷、快速和高效的订餐服务。这种系统通过将餐厅、顾客和配送人员连接起来&#xff0c…

截屏工具,

1&#xff0c;pc端的shiftwins&#xff0c;或者是prtsc按钮&#xff0c;但是有时候容易失效 2&#xff0c;第三方工具&#xff1a;Snipaste Snipaste - 截图 贴图 用户手册见Snipaste **常用F2或者是F3快捷键&#xff0c;切换桌面&#xff0c;而不是下端一个一个点击窗口页面…

论文阅读与写作入门

文章目录 1.阅读第一篇论文(1)论文结构(2)目标 2.使用GPT辅助论文的阅读与写作3.专有名词(1)架构(2)网络(3)机器学习 4.文献翻译软件5.从哪里下载文献&#xff1f;6.如何判断(你自己的)研究工作的价值or贡献【论文精读李沐】7.经典论文(1)AlexNet 2012(2)FCN 全卷积 2014(3)Res…

【Go语言】语法基础之变量、数据类型详解

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Go语言探索之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Go语言简介 2、Go语言特点 二、变量 1、变量的声明与初始化 2、变量…

【C++篇】C++类与对象深度解析(五):友元机制、内部类与匿名对象的讲解

文章目录 前言 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助&#xff01…

时序数据库 TDengine 支持集成开源的物联网平台 ThingsBoard

Thingsboard 中“设备配置”和“设备”的关系是一对多的关系&#xff0c;通过设备配置为每个设备设置不同的配置&#xff0c;每个设备都会有一个与其关联的设备配置文件。等等&#xff0c;这不就是TDengine 中超级表的概念&#xff1a; 超级表是一种特殊的表结构&#xff0c;用…

【功能安全】汽车功能安全个人认证证书

目录 1、证书 2、课程信息 &#x1f4d6; 推荐阅读 1、证书 汽车功能安全工程师去拿类似莱茵、SGS、南德颁发的证书&#xff0c;如下&#xff1a; 2、课程信息 一般上什么课程了&#xff0c;课程信息大概如下&#xff1a; 汽车功能安全工程师认证课 &#xff08;3天&#…

数据库作业2

建立并使用mydb8_worker&#xff0c;并在其中建表&#xff1a; &#xff08;1&#xff09;显示所有职工的基本信息 &#xff08;2&#xff09;去重查询 &#xff08;3&#xff09;所有职工人数 &#xff08;4&#xff09;最高最低工资 &#xff08;5&#xff09;平均工资和总工…

2024“龙信杯“电子数据取证竞赛-手机取证题目Writeup

文章关键词&#xff1a;电子数据取证、电子物证、手机取证、服务器取证、介质取证 案情介绍 近期&#xff0c;某公安机关正式受理了一起受害者报案案件。受害者陈述称&#xff0c;其通过微信平台结识了一名自称为相亲中介服务的客服人员。该客服人员诱骗受害者参与所谓的“相亲…