The background image is not appearing on my JSP dynamic web project

Hey there! I've been working on adding a background image to my home.jsp page, but unfortunately, when I run the project, the image doesn't load and instead, a little red cross mark appears in its place.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
       <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="ac-styles.css" type="text/css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home Page</title>

</head>
<body  >
<img src="img/bg.png">


<p> Hello This Is The Home Page For your J2ee Spring Application</p>

</body>
</html>

I've placed the image under:

But when I run the application, the result is not what I expected.

Any help would be greatly appreciated - thank you in advance!

Answer №1

If your JSP file is not located in the same folder as the image root directory, you have a couple of options. You can either move your .jsp file to the web-content folder or use relative path commands like:

<img src="../../img/bg.png">

This should solve the issue. Alternatively, you could consider relocating your image file to the web-inf/views folder for easier access, although this is not recommended for larger projects.

Keep in mind that I added "../" twice. This is necessary based on your directory structure. For more details, refer to the HTML source manual.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring Bootstrap 4 columns have identical height to their siblings when large amounts of scrollable content are present

Is there a way to set the height of a column to match its sibling? I need the children of a column to have a specific height that fills up the remaining space, even if their content is too large. Check out this demo for reference: https://stackblitz.com/ ...

Arranging my HTML text fields for optimal organization

I am struggling to format my text fields the way I envision. Here's what I want: - Username field at the top - First and last name underneath each other - Password and confirm password next to each other below names As a newcomer to HTML, I'm fi ...

How can XPath be used to target a specific parent element?

After reviewing the material, I am led to believe that it may not be feasible; however, I will present the following scenario just in case: Consider the following oversimplified HTML structure (derived from a CMS-generated HTML, hence limited control) < ...

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

Include a character on the right side without shifting the text to the left

Below is the HTML code I am currently working with: <div class="last_img"> <p>Galutinė žetono išvaizda:</p> <span class="zetin11">A</span> <span class="zetin12">A</span> < ...

Embed a FLV video within a jQuery tooltip

My current setup includes a line of code like this: <img title="FLV Video goes here" class="tooltip" src="/images/icon-question.png" alt="questions" width="12" height="12" border="0" /> When hovering over the image, the text in the title attribute ...

Issue with "repeat-x" causing distortion in mobile image display

My repeating background image (.png) looks great on desktop with repeat-x, but on mobile, it has a slight repeat-y edge at the top: https://i.sstatic.net/yFfea.jpg The source image is 300px wide and 100px high, and the CSS for this div is: background: u ...

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot... I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In thi ...

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

HTML and CSS - Aligning text and managing scrollbar visibility

I am currently diving into the world of coding and embarking on the journey of crafting a website for my father. This project not only helps me gain valuable experience but also builds up my portfolio. Utilizing unsemantic and normalize frameworks, I enco ...

Box without a border wrapping around it

I can't seem to figure out why the border I applied to a child div is not completely enclosing the element. I created two boxes using div tags and added a border to one of them. #box { height: 500px; width: 500px; background-c ...

Fade In/Out Scroll Effect

As the user scrolls down the page, I have a slider that smoothly slides from right to left. What I'm trying to achieve is for the slider to fade out when the last slide is no longer in view during downward scrolling, and fade back in as the last slid ...

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

Using data from an API, I am implementing JavaScript validation for my dropdown select menu

Using an API, I am able to access information about the city's subway stations through a select option. Currently, I can only display details about one station (Balard). However, I would like to be able to display information about other stations tha ...

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

Don't leap to the top of the page, take your time!

This is the question I have posed <a href="#" onclick="return false">show_all</a> I attempted onclick=preventDefault(); onclick="return false"; However, it is continuing to jump to the top of the page. Any recommendations on how to pr ...

What is the best way to position an element on top of a section of a massive image using CSS?

My current project involves creating a demo of my app within the app itself. To give you an idea, check out the images below: https://i.sstatic.net/J4gbS.png https://i.sstatic.net/OAmwK.png Let me provide some context. The large black rectangle represe ...

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

Searching and replacing query strings in a URL using JQuery according to the chosen option in an HTML dropdown menu

Is there a way to use jQuery to dynamically change a specific value in the query string by finding and replacing that value based on the selection made from a dropdown menu on the webpage? For example: Imagine we have this query string on the current page ...