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

news/2024/9/17 4:48:17 标签: vue.js, 前端, javascript

因为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.niftyadmin.cn/n/5645686.html

相关文章

C++详解string(全面解析)

目录 string的概念&#xff1a; string的框架&#xff1a; 1、成员函数 2、迭代器&#xff08;Iterators&#xff09;​编辑 3、容量 4、元素访问 5、修改 6、非成员函数重载 string的构造和拷贝构造&#xff1a; string的析构&#xff1a; string的访问&#xff1a;…

2024/9/6黑马头条跟学笔记(三)

D3 内容介绍 jdk8新特性&#xff0c;stream流&#xff0c;lambda表达式 ​ 自媒体前后端搭建 步骤 sql—— 实体—— 微服务拷贝&#xff0c;配置nacos—— spring:datasource:driver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://192.168.233.136:3306/leadnews_…

【Linux系统学习】2.Linux基础命令

Linux基础命令 Linux的目录结构 Linux命令入门 目录切换相关命令(cd/pwd) 相对路径、绝对路径和特殊路径符 创建目录命令(mkdir) 文件操作命令part1(touch、cat、more&#xff09; 文件操作命令part2(cp、mv、rm&#xff09; 查找命令(which、find&#xff09; grep、wc和管道符…

mysql高级sql

文章目录 一&#xff0c;查询1.按关键字排序1.1按关键字排序操作(1)按分数排序查询&#xff08;不加asc默认为升序&#xff09;(2)按分数降序查询&#xff08;DESC&#xff09;(3)使用where进行条件查询(4)使用ORDER BY语句对多个字段排序 1.2使用区间判断查询&#xff08;and/…

【Spark源码分析】ApplicationMaster基本启动流程

ApplicationMaster基本启动流程 文章目录 ApplicationMaster基本启动流程ApplicationMaster的run的过程runDriver()的流程runExecutorLauncher()的流程 ApplicationMaster在client mode与cluster mode 的区别 Spark源码版本为3.4.2 是以Spark On Yarn的集群模式角度来分析Appli…

真实案例分享:零售企业如何避免销售数据的无效分析?

在零售业务的数据分析中&#xff0c;无效分析不仅浪费时间和资源&#xff0c;还可能导致错误的决策。为了避免这种情况&#xff0c;企业必须采取策略来确保他们的数据分析工作能够产生实际的商业价值。本文将通过行业内真实的案例&#xff0c;探讨零售企业如何通过精心设计的数…

STM32的使用方法一

注:我采用的是STM32F103RC芯片、相应的电路图和STM32CubeIDE软件这是在STM32CubeIDE软件定义芯片后&#xff0c;所给的必要的代码逻辑&#xff0c;加上了注释 #include "main.h"/* Private variables ---------------------------------------------------------*//…

js react 笔记 2

起因&#xff0c; 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块 const { randomUUID } require(crypto);const uuid randomUUID(); console.log(uuid); // 输出类似 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d 2. 使用 props, 传递参数…