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

news2024/10/18 14:39:58

问题:两种图片路径的指定方式,第一种能展示图片但第二种不能
两个 示例中,图片展示的差异。
在第一个示例中,图片路径是硬编码在 标签的 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.coloradmin.cn/o/2217843.html

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

相关文章

低代码可视化-uniapp购物车页面-代码生成器

购物车页面是电子商务网站或应用程序中的一个关键功能页面&#xff0c;它允许用户查看、编辑和管理他们选择加入购物车的商品。下面通过低代码可视化实现一个uniapp购物车页面&#xff0c;把购物车整个事件都集成进去。实现完成后可以保存为页面模板。 收货地址选择 如果尚未…

基于SpringBoot+Vue+uniapp微信小程序的垃圾分类系统的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

Cursor 、v0 和 Bolt.new:当今 AI 编程工具的全面解析与对比

AI 驱动的编码工具正在迅速发展&#xff0c;每次新版本的发布都承诺将改变我们的开发流程。这些工具旨在通过智能代码建议、重复任务的自动化&#xff0c;甚至从自然语言提示生成整个代码片段来提升生产力。10月4日&#xff0c;StackBlitz 推出了 Bolt.new&#xff0c;进一步丰…

建议大家尽早培养自己的表达能力!分享6个有效工具~

在日常工作生活中&#xff0c;有效沟通是成事的不二法则。现在很多人不热衷沟通&#xff0c;对人际交往没热情&#xff0c;但是会和不用&#xff0c;与不想也不会是两回事&#xff0c;所以掌握一些沟通技巧很有必要。 如何进行有效沟通&#xff1f;推荐大家进行结构化表达和沟…

代码复现(五):GCPANet

文章目录 net.py1.class Bottleneck&#xff1a;残差块2.class ResNet&#xff1a;特征提取3.class SRM&#xff1a;SR模块4.class FAM&#xff1a;FIA模块5.class CA&#xff1a;GCF模块6.class SA&#xff1a;HA模块7.class GCPANet&#xff1a;网络架构 train.pytest.py 论文…

计算机视觉——人像的分割与无缝融合

1.概述 新加坡现代汽车集团创新中心的一篇新论文提供了一种在计算机视觉中分离“融合”人像的方法——在这些情况下&#xff0c;对象识别框架发现一个人在某种程度上与另一个人“太接近”&#xff08;例如例如“拥抱”动作或“站在后面”的姿势&#xff09;&#xff0c;并且无法…

从零实现数据结构:堆的实现和简单堆排序

事先说明&#xff0c;这里采用的都是小堆。下面是代码中的小堆示意图 这里向大家分享一个常见数据结构可视化的网址&#xff1a;Data Structure Visualization (usfca.edu) 声明部分heap.h&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include &…

Turtle画树丛

Turtle画树丛&#xff0c;50棵树&#xff0c;左侧的树向左倾斜&#xff0c;右侧的树向右倾斜。 完整代码如下&#xff1a; import turtle import randomdef draw_tree(pos,hd,angle,len,init_len,level): t.penup()t.goto(pos)t.pendown()t.setheading(hd)if pos[0]<0:t…

基于C++实现(控制台)职工信息管理系统

高级程序设计实验报告 一、实验内容 设计一个职工信息管理案例&#xff0c;实现不同类别职工的工资数据。职工的种类包括&#xff1a;正式职工和临时工。定义一个基本的职工类&#xff0c;基本信息包括&#xff1a;编号、姓名、性别、年龄、家庭住址、基本职务工资。派生出正…

当前python文件所在位置的上级文件夹的路径表示法:..的等价表示法os.pardir

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 当前python文件 所在位置的上级文件夹 的路径表示法&#xff1a;.. 的等价表示法 os.pardir [太阳]选择题 下列说法中正确的是? import os parent_dir os.pardir print("【显示】…

Axure重要元件三——中继器表单制作

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 本节课&#xff1a;中继器表单制作 课程内容&#xff1a;利用中继器制作表单 应用场景&#xff1a;台账、表单 案例展示&#xff1a; 步骤一&#xff1a;建立一个背景区…

【WPF】04 Http消息处理类

这里引入微软官方提供的HttpClient类来实现我们的目的。 首先&#xff0c;介绍一下官方HttpClient类的内容。 HttpClient 类 定义 命名空间: System.Net.Http 程序集: System.Net.Http.dll Source: HttpClient.cs 提供一个类&#xff0c;用于从 URI 标识的资源发送 HTTP 请…

探索性数据分析 (EDA) 简介

文章目录 一、介绍二、探索性数据分析 (EDA)三、探索性数据分析的类型3.1 单变量分析3.2 双变量分析3.3 多元分析 四、理解 EDA五、结论 一、介绍 探索性数据分析是研究或理解数据并提取洞察数据集以识别数据模式或主要特征的过程。EDA 通常分为两种方法&#xff0c;即图形分析…

Spring Boot 整合 RocketMQ 之顺序消息

前言&#xff1a; 上一篇我们分享了 Spring Boot 整合 RocketMQ 完成普通消息发送的过程&#xff0c;本篇我们来分享一下 RocketMQ 顺序消息的发送。 RocketMQ 系列文章传送门 RocketMQ 的介绍及核心概念讲解 Spring Boot 整合 RocketMQ 之普通消息 Spring Boot 整合 Rock…

大数据-178 Elasticsearch Query - Java API 索引操作 文档操作

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

芯片设计企业ERP软件如何选择更好

在芯片设计这一高科技领域&#xff0c;高效的企业管理成为推动创新与市场响应速度的关键。ERP(企业资源计划)软件作为企业管理的核心工具&#xff0c;其选择直接关系到企业的运营效率与竞争力。那么&#xff0c;芯片设计企业在面对琳琅满目的ERP软件时&#xff0c;如何做出更优…

【HTML + CSS 魔法秀】打造惊艳 3D 旋转卡片

HTML结构 box 类是整个组件的容器。item-wrap 类是每个旋转卡片的包装器&#xff0c;每个都有一个内联样式–i&#xff0c;用于控制动画的延迟。item类是实际的卡片内容&#xff0c;包含一个图片。 <template><div class"box"><div class"item…

Axure横向菜单高级交互

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;横向菜单高级交互 主要内容&#xff1a;横向菜单左右拖动、选中效果 应用场景&#xff1a;app横向菜单、pc后台动态区域 案例展示&#xff1a; 演…

ThreadLocal源码详解

目录 Thread、ThreadLocalMap 、ThreadLocal关系 ThreadLocal中的get、Set方法 ThreadLocal 内存泄露问题 Thread、ThreadLocalMap 、ThreadLocal关系 从源码可以看出&#xff1a;Thread类中有成员变量ThreadLocalMap&#xff0c;ThreadLocalMap类中有成员变量Entry[]数组&a…

Spring Cache Caffeine 高性能缓存库

​ Caffeine 背景 Caffeine是一个高性能的Java缓存库&#xff0c;它基于Guava Cache进行了增强&#xff0c;提供了更加出色的缓存体验。Caffeine的主要特点包括&#xff1a; 高性能&#xff1a;Caffeine使用了Java 8最新的StampedLock乐观锁技术&#xff0c;极大地提高了缓存…