Spring boot +Thymeleaf 本地图片加载失败(图片路径)的问题及解决方法

news2025/1/8 20:15:18

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。

前言

       在Spring Boot应用程序中,有时候我们会遇到本地图片不能加载的问题,这通常是由于图片路径不正确导致的。在本文中,我们将详细讲解这个问题的原因,并提供两个示例来说明如何解决这个问题

问题原因

       在Spring Boot应用程序中,我们通常将静态资源(如图片、CSS和JavaScript文件)放在src/main/resources/static目录下。当我们在HTML或Thymeleaf模板中引用这些静态资源时,我们需要使用相对路径来指定它们的位置。例如,如果我们有一个名为logo.png的图片,它位于src/main/resources/static/images目录下,我们可以在HTML或Thymeleaf模板中使用以下代码来引用它:

<img src="images/logo.png" alt="Logo">

       但是,有时候我们会遇到本地图片不能加载的问题。这通常是由于图片路径不正确导致的。下面是两个示例来说明这个问题。

示例1:图片路径不正确

       在这个示例中,我们将演示当图片路径不正确时,图片无法加载的问题。下面是一个示例:

<img src="logo.png" alt="Logo">

       在上面的代码中,我们使用了相对路径来指定图片的位置。但是,由于我们没有指定图片所在的目录,因此图片无法加载。

示例2:使用Thymeleaf模板时,图片路径不正确

       在这个示例中,我们将演示在使用Thymeleaf模板时,图片路径不正确导致图片无法加载的问题。下面是一个示例:

<img th:src="@{/images/logo.png}" alt="Logo">

       在上面的代码中,我们使用了Thymeleaf的语法来指定图片的位置。但是,由于我们没有将图片放在正确的目录下,因此图片无法加载。

解决方法

       要解决本地图片不能加载的问题,我们需要确保图片路径正确。具体来说,我们需要将图片放在正确的目录下,并使用正确的相对路径或Thymeleaf语法来指定图片的位置。下面是两个示例来说明如何解决这个问题。

解决方法1:使用正确的相对路径

       如果我们将图片放在src/main/resources/static/images目录下,我们可以使用以下代码来引用它:

<img src="images/logo.png" alt="Logo">

       在上面的代码中,我们使用了正确的相对路径来指定图片的位置。这样,图片就可以正确加载了。

解决方法2:使用正确的Thymeleaf语法

       如果我们使用Thymeleaf模板来引用图片,我们可以使用以下代码来指定图片的位置:

<img th:src="@{/images/logo.png}" alt="Logo">

       在上面的代码中,我们使用了正确的Thymeleaf语法来指定图片的位置。这样,图片就可以正确加载了。

项目实战

错误写法及效果

在这里插入图片描述

在这里插入图片描述

正确写法及效果

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

前后端数据加密传输基于AES+RSA实现

前后端数据加密传输基于AESRSA实现 什么是AES和RSA AES AES&#xff08;Advanced Encryption Standard&#xff09;是一种对称加密算法&#xff0c;它的加密速度快&#xff0c;安全性也比较高&#xff0c;是目前广泛使用的加密算法之一。AES的密钥长度可以选择128位、192位和…

腾讯云新用户云服务器特惠价格表(2023年)

腾讯云作为国内领先的云计算服务提供商&#xff0c;一直致力于为全球用户提供稳定、安全、高效的云计算服务。对于新用户而言&#xff0c;腾讯云提供了多种特惠的云服务器套餐&#xff0c;以满足不同用户的需求。 1、轻量应用服务器 腾讯云的轻量应用服务器提供了高性价比的解决…

Java 大文件排序

大文件排序 http://en.wikipedia.org/wiki/Merge_sort http://en.wikipedia.org/wiki/External_sorting 外排序 通常来说&#xff0c;外排序处理的数据不能一次装入内存&#xff0c;只能放在读写较慢的外存储器&#xff08;通常是硬盘&#xff09;上。 外排序通常采用的是…

Oracle数据库概念简介

1. 数据库 一般意义上的数据库包含两个部分 库&#xff1a;就是一个存储一堆文件的文件目录数据库管理系统&#xff1a;管理库的系统 2. DBMS 数据库管理系统 数据库管理系统(Database Management System)&#xff0c;是一种操纵和管理数据库的大型软件&#xff0c;用于建立…

vue中v-for循环数组使用方法中splice删除数组元素(每次都删掉点击的下面的一项)

总结&#xff1a;平常使用v-for的key都是使用index&#xff0c;这里vue官方文档也不推荐&#xff0c;这个时候就出问题了&#xff0c;我们需要key为唯一标识&#xff0c;这里我使用了时间戳&#xff08;new Date().getTime()&#xff09;处理比较复杂的情况&#xff0c; 本文章…

mac安装adobe需要注意的tips(含win+mac all安装包)

M2芯片只能安装2022年以后的&#xff08;包含2022年的&#xff09; 1、必须操作的开启“任何来源” “任何来源“设置&#xff0c;这是为了系统安全性&#xff0c;苹果希望所有的软件都从商店或是能验证的官方下载&#xff0c;导致默认不允许从第三方下载应用程序。macOS sie…

接口参数校验

方式一&#xff1a;使用hibernate-validator注解方式参数校验 类似的框架太多了。缺点&#xff1a;返回的提示信息顺序不太确定 文档&#xff1a;https://hibernate.org/validator/documentation/ 参考资料&#xff1a;https://blog.csdn.net/weixin_45080272/article/details…

C++二叉树

代码随想录 (programmercarl.com) 二叉树理论基础篇 #算法公开课 《代码随想录》算法视频公开课 (opens new window) 大纲如下&#xff1a; 说到二叉树&#xff0c;大家对于二叉树其实都很熟悉了&#xff0c;本文呢我也不想教科书式的把二叉树的基础内容再啰嗦一遍&#xf…

npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...

使用 dumi 开发 React 组件库时&#xff0c;为避免每次修改都发布到 npm&#xff0c;需要在本地的测试项目中使用 npm link 为组件库建立软连接&#xff0c;方便本地调试。 结果在本地测试项目使用 $ npm link 组件库 后&#xff0c;使用内部组件确报错&#xff1a; react.dev…

4.(高级示例篇)leaflet移动端交互示例

注&#xff1a;高级示例博客不提供源码 地图之家总目录&#xff08;订阅之前建议先查看该博客&#xff09; 效果如下所示&#xff1a; leaflet移动端交互示例

2023年必须要知道的AI热词,看这一篇就够了!

2023年是AI工具大爆发的一年&#xff0c;随着AI的快速发展&#xff0c;出现了很多AI相关的名词&#xff0c;今天带你详细了解那些热门的AI词。 思维导图&#xff1a; https://gitmind.cn/app/docs/muksa9nd AI 人工智能 Artificial Intelligence&#xff0c;即人工智能&…

如何在VueJS应用程序中设置Toast通知

通知是开发者提升应用程序互动性和改善用户体验的强大工具。通过利用通知&#xff0c;开发者可以在用户与应用程序互动的同时&#xff0c;有效地向用户传达重要事件。 通知在应用程序中起着至关重要的作用&#xff0c;可以及时通知用户有关各种操作和事件的信息。它们可以用于通…

【sgCreateAPI】自定义小工具:敏捷开发→自动化生成API接口脚本(接口代码生成工具)

<template><div :class"$options.name"><div class"sg-head">接口代码生成工具</div><div class"sg-container"><div class"sg-start "><div style"margin-bottom: 10px;">接口地…

uniapp 网络请求封装(uni.request 与 uView-Plus)

一、背景 在开发项目中&#xff0c;需要经常与后端服务器进行交互&#xff1b;为了提高开发效率和代码维护性&#xff0c;以及降低重复性代码&#xff0c;便对网络请求进行封装统一管理。 二、创建环境文件 2.1、根目录新建utils文件夹&#xff0c;utils文件夹内新建env.js文…

中缀表达式 - 栈实现综合计算器

代码&#xff1a; package Algotithm.stackobject Calculator {def main(args: Array[String]): Unit {val expression "32*6-2"//创建两个栈&#xff1a;数栈、符号栈val numStack, operStack new ArrayStack2(10)//定义需要的相关变量var index, num1, num2, …

iOS开发Swift-9-SFSymbols,页面跳转,view屏幕比例,启动页-和风天气AppUI

1.创建项目 2.设置好测试机型,App显示名称,以及关闭横向展示. 3.下载SF Symbols. https://developer.apple.com/sf-symbols/ 右上角搜索 search ,可以找到很多系统自带图标.选择喜欢的图标,拷贝图标的名字. 插入一个Button,在Image中粘贴图标名称并选择,即可将Button变成想要的…

遥感图像应用:在低分辨率图像上实现洪水损害检测

代码来源&#xff1a;https://github.com/weining20000/Flooding-Damage-Detection-from-Post-Hurricane-Satellite-Imagery-Based-on-CNN/tree/master 数据储存地址&#xff1a;https://github.com/JeffereyWu/FloodDamageDetection/tree/main 数据详情&#xff1a;训练数据…

决策工具箱:战略分析必备工具与框架

跟随时代的步伐&#xff0c;企业战略也在不断演化。无论是初创企业还是知名企业&#xff0c;都需要有效的战略工具来指导其业务发展。探索这些必备工具&#xff0c;并学习如何最大限度地利用它们&#xff0c;是企业的一个学习目标。 战略分析工具和框架有很多&#xff0c;其中…

读懂AUTOSAR规范,之CanIf 发送缓冲(带实例代码)

1. General behavior一般行为 在CanIf范围内,传输过程始于调用CanIf_Transmit(),并在调用上层模块的回调服务<User_TxConfirmation>()时结束。在传输过程中,CanIf、CanDrv和CAN邮箱应共同将要传输的L-PDU仅存储一次在单个位置。根据传输方法,这些位置可以是: • CA…

Java字符串查找

目录 1.查找字符 &#xff08;1&#xff09;以索引查找字符 &#xff08;2&#xff09;以字符查找索引 2.查找字符串 在给定的字符串中查找需要的字符或字符串是常见的操作&#xff0c;以下是String类中常用的查找方法。 1.查找字符 查找字符分为两种情况&#xff1a;一种…