vue中使用相对路径图片不显示

news2024/9/20 0:38:54

因为webpack问题,webpack打包会将静态资源放在一个webpack创建的Img文件夹中,并且图片名字还会被更改

我的文件目录是没有Img文件夹的,且图片名字没有那串乱字符

  1. 路径问题:

    • Vue 项目通常会将资源文件放在 src/assets 目录下,并通过 webpack 来处理资源路径。
    • 在你的代码中,第一张图片 ./banner1.jpg 的路径是相对的,而第二张图片的路径是 ./html/hanjiang/hanjiang/src/assets/banner2.jpg,这个路径看起来比较复杂,可能不符合项目的文件结构或配置。

    解决方法:

    • 确保图片 banner2.jpg 确实存在于指定路径中。
    • 更改第二张图片的路径为相对 src/assets 的路径。例如,如果 banner2.jpg 存在于 src/assets 目录下,可以使用 require 来引入:
       

      javascript

      bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')] 使用 @/assets 是指从 src/assets 开始的路径。
  2. 资源处理配置:

    • Vue CLI 默认配置下,静态资源的路径通常需要使用 require 或 import 语句来正确处理。直接使用字符串路径可能导致路径解析错误。

    解决方法:

    • 使用 require 语法确保图片路径正确:
       

      javascript

      data: function () { return { bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')] } } 这样可以确保 webpack 能够正确处理图片路径。
  3. 图片加载问题:

    • 如果图片文件存在,但路径不正确,可能会导致图片无法加载。确保路径是正确的,并且图片文件确实在项目的 src/assets 目录或相对位置中。
  4. 缓存问题:

    • 有时浏览器缓存可能会导致图片无法正确加载。可以尝试清除浏览器缓存或在路径后添加查询字符串来强制刷新:
       <img :src="bannerImg[0] + '?v=1'" alt="" style="width: 1200px;">

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

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

相关文章

如何在 Cursor IDE 中使用驭码CodeRider 进行 AI 编程?

驭码CodeRider 是极狐GitLab 公司自研发布的 AIGC 产品&#xff0c;可以用来进行 AI 编程和 DevOps 流程处理。本文分享如何在 Cursor 中使用驭码CodeRider。 Cursor 是近期比较火爆的一款 AI 代码编辑器&#xff0c;通过将 AI 能力引入软件研发来提升软件研发效率。而驭码Cod…

三、Maven工程的构建

首先&#xff0c;创建和构建是两个概念。 构建是指将源代码、依赖库和资源文件等转换为可执行或可部署的应用程序的过程。 在这个过程中包括编译源代码、链接依赖库、打包和部署等多个步骤。 项目构建是软件开发过程中至关重要的一部分&#xff0c;它能够大大提高软件开发效率…

通信工程学习:什么是FM频率调制

FM&#xff1a;频率调制 FM&#xff1a;Frequency ModulatioFn&#xff0c;全称“频率调制”&#xff0c;是一种通过改变载波信号的频率来传递信息的调制方式。以下是对FM频率调制的详细解释&#xff1a; 一、FM频率调制的定义与原理 FM频率调制的定义&#xff1a; FM频率调制…

算法复杂度 —— 数据结构前言、算法效率、时间复杂度、空间复杂度、常见复杂度对比、复杂度算法题(旋转数组)

目录 一、数据结构前言 1、数据结构 2、算法 3、学习方法 二、 算法效率 引入概念&#xff1a;算法复杂度 三、时间复杂度 1、大O的渐进表示法 2、时间复杂度计算示例 四、空间复杂度 计算示例&#xff1a;空间复杂度 五、常见复杂度对比 六、复杂度算法题&…

【Linux 内核构建】如何查看 Linux 系统中可以选择的内核有哪一些?如何切换 Linux kernel 版本?

背景 在折腾内核版本时&#xff0c;遇到的问题&#xff0c;遂将各方面的答案整理在一起。 解决方法 1. 查看 grub 菜单【一般在服务器上可能不用此方法】 在系统启动时&#xff0c;grub 菜单会列出所有可用的内核选项。要查看这些选项&#xff1a; 重启系统&#xff1a;在系…

C#/WinForm演示最小二乘法拟合一次函数

一、什么是最小二乘法 最小二乘法&#xff08;Least Squares Method&#xff09;是一种数学优化技术&#xff0c;常用于拟合数据和估计参数。它的主要目标是找到一个函数&#xff0c;使其预测值与观测值之间的残差平方和最小化。 在最小二乘法中&#xff0c;通常考虑一个具有n…

【解决方案】软件大屏实现整体技术解决方案

1.系统概述 1.1.需求分析 1.2.重难点分析 1.3.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 2.3.接口及要求 3.系统功能设计 3.1.功能清单列表 3.2.数据源管理 3.3.数据集管理 3.4.视图管理 3.5.仪表盘管理 3.6.移动端设计 3.1.系统权限设计 3.2.数据查询过程设…

ue5 AI追角色后失去目标解决办法

首先创建接口 再到黑板中创建两个布尔变量 之后到AIcontroler中写下以下代码 再新建一个追寻到玩家最后位置的任务 最后在行为树中添加该任务&#xff0c;我这的逻辑是AI巡逻后发现玩家追逐玩家&#xff0c;如果此时AI看不到玩家了&#xff0c;也就是失去视野了&#xff0c;就执…

Linux初识线程

前言 前面在介绍进程的时候&#xff0c;说过进程的内核表述是"进程是承担资源分配的基本实体"&#xff0c;但是我们至今都没有介绍如何理解他&#xff1f;本期我们就会介绍&#xff01; 目录 前言 一、再谈地址空间和页表 1、OS对物理内存的管理 • 为什么4KB是…

RocketMQ之发送消息源码分析

RocketMQ之send()源码分析 一、代码序列图 二、关键步骤分析 1、向namesrv拉取队列信息 2、选择目标队列 3、向broker发送消息 三、代码学习 1、代码结构 &#xff08;设计模式&#xff09; 2、工具类和方法

HarmonyOS应用开发环境搭建

本文主要讲述的是HarmonyOS应用开发环境的搭建&#xff0c;HUAWEI DevEco Studio是基于IntelliJ IDEA Community开源版本打造&#xff0c;为运行在HarmonyOS系统上的应用和服务提供一站式的开发平台。具体下载链接DevEco Studio 一、下载 DevEco Studio 只需要下载对应的版本&…

Java程序到CPU上执行 的步骤

相信很多的小伙伴在最初学习编程的时候会容易产生一个疑惑❓&#xff0c;那就是编写的Java代码究竟是怎么一步一步到CPU上去执行的呢&#xff1f;CPU又是如何执行的呢&#xff1f;今天跟随小编的脚步去化解开这个疑惑❓。 在学习这个过程之前&#xff0c;我们需要先讲解一些与…

加密与安全_ sm-crypto 国密算法sm2、sm3和sm4的Java库

文章目录 sm-crypto如何使用如何引入依赖 sm2获取密钥对加密解密签名验签获取椭圆曲线点 sm3sm4加密解密 sm-crypto https://github.com/antherd/sm-crypto 国密算法sm2、sm3和sm4的java版。基于js版本进行封装&#xff0c;无缝兼容js版公私钥加解密。 PS: js版&#xff1a;h…

SpringBoot中利用EasyExcel+aop实现一个通用Excel导出功能

一、结果展示 主要功能&#xff1a;可以根据前端传递的参数&#xff0c;导出指定列、指定行 1.1 案例一 前端页面 传递参数 {"excelName": "导出用户信息1725738666946","sheetName": "导出用户信息","fieldList": [{&q…

2024 年高教社杯全国大学生数学建模竞赛C题—农作物的种植策略(讲解+代码+成品论文助攻,均已更新完毕)

2024数学建模国赛选题建议团队助攻资料-CSDN博客文章浏览阅读1k次&#xff0c;点赞20次&#xff0c;收藏24次。通过分析5个题目的特点&#xff0c;可知数学建模常用的模型大概可以分为五大类——https://blog.csdn.net/qq_41489047/article/details/141925859 本次国赛white学长…

Gitflow基础知识

0.理想状态 现状 听完后的理想状态 没使用过 git 知道 git 是什么&#xff0c;会用 git 基础流程命令 用过 git&#xff0c;但只通过图形化界面操作 脱离图形化界面操作&#xff0c;通过 git 命令操作 会 git 命令 掌握 gitflow 规范&#xff0c;合理使用 rebase 和解决…

ffmpeg安装测试(支持cuda支持SRT)

文章目录 背景安装ffmpeg直接下载可执行文件选择版本选择对应系统版本下载测试Linux下安装 查看支持协议以及编码格式 常见错误缺少 libmvec.so.1LD_LIBRARY_PATH 错误 GPU加速测试SRT服务器搭建下载srs5.0源码解压安装配置启动 SRT推流测试SRT播放测试 背景 在音视频开发测试中…

Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统 一、Kafka 概述1.1 Kafka 定义1.2 Kafka 设计目标1.3 Kafka 特点 二、Kafka 架构设计2.1 基本架构2.2 Topic 和 Partition2.3 消费者和消费者组2.4 Replica 副本 三、Kafka 分布式集群搭建3.1 下载解压3.1.1 上传解压 3.2 修改 Kafka 配置文件3.2.1 修改z…

Java操作Elasticsearch的实用指南

Java操作Elasticsearch的实用指南 一、创建索引二、增删改查 一、创建索引 在ElasticSearch中索引相当于mysql中的表,mapping相当于表结构&#xff0c;所以第一步我们要先创建索引。 假设我们有一张文章表的数据需要同步到ElasticSearch&#xff0c;首先需要根据数据库表创建…

DisplayManagerService启动及主屏添加-Android13

DisplayManagerService启动及主屏添加-Android13 1、DisplayManagerService启动1.1 简要时序图 2、DEFAULT_DISPLAY主屏幕添加2.1 物理屏热插拔监听2.2 物理屏信息 3、默认屏幕亮度 1、DisplayManagerService启动 1.1 简要时序图 代码位置&#xff1a;frameworks/base/service…