Image not displayed in jsp in Maven Project - spring

I know this question is answered a million times but I have tried every possible suggestion and nothing works. Here is the structure of my project:
I have tried 3 different directories to put my img.jpg, but non of them displays the image
Here is my jsp:
main.jsp
<%# page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Home Page</title>
</head>
<body>
<img value="<%=getServletContext().getRealPath("/") %>" src="/webapp/WEB-INF/imags/img.jpg"/>
<br>
<h1>The FoRoom</h1>
<h2>Millions of users communicate everyday</h2>
Log In
<br>
<a href="${pageContext.request.contextPath}/addUser">Sign Up (Add
User)</a>
<br>
<a href="${pageContext.request.contextPath}/logInAsAdmin">Log In as
an Administrator</a>
<br>
</body>
</html>
Here is the 1st comment section:
<!-- 1st comment section -->
<!-- no error with GET!!!
<input type="image" src="C:\Users\MyUser\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\SpringMVC\images\img.jpg">
<input type="image" src="C:/Users/MyUser/eclipse-workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/SpringMVC/images/img.jpg" >
<input type="image" src="< %=getServletContext().getRealPath("/images/img.jpg") %>" value="< %=getServletContext().getRealPath("/") %>">
<input type="image" src="< %=getServletContext().getRealPath("/images/img.jpg") %>" value="< %=getServletContext().getRealPath("/images/img.jpg") %>">
<input type="image" src="< %=getServletContext().getRealPath("/images/img.jpg") %>" value="< %=getServletContext().getRealPath("/images/img.jpg") %>" name="img.jpg">
<input type="image" value="< %=getServletContext().getRealPath("/imags/img.jpg") %>" name="img.jpg">
<input type="image" value="< %=getServletContext().getRealPath("/images/img.jpg") %>" name="img.jpg">
<input type="hidden" value="< %=getServletContext().getRealPath("/imags/img.jpg") %>" name="img.jpg">
<input type="hidden" value="< %=getServletContext().getRealPath("img.jpg") %>" name="img.jpg">
<img value="< %=getServletContext().getRealPath("/") %>" src="/webapp/images/img.jpg"/>
<img value="<%=getServletContext().getRealPath("/imags/img.jpg") %>" name="img.jpg">
<img alt="/src/main/webapp/images/img.jpg" src="/src/main/webapp/images/img.jpg">
<br>
<img alt="/main/webapp/images/img.jpg" src="/main/webapp/images/img.jpg">
<br>
<img alt="/webapp/images/img.jpg" src="/webapp/images/img.jpg">
<br>
<img alt="/webapp/images/img.gif" src="/webapp/images/img.gif">
<img value="< %=getServletContext().getRealPath("/") %>" src="/webapp/images/img.jpg"/>
<tools:img path="/images/img.jpg"/>
<img alt="d" src="< %=request.getContextPath() %>/webapp/images/img.jpg">
<img src="C:/Users/MyUser/eclipse-workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/SpringMVC/images/img.jpg" >
<img src="C:\Users\MyUser\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\SpringMVC\images\img.jpg">
<img src="C:\Users\MyUser\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\SpringMVC\images\img.jpg" width="48" height="48">
<c:url value="/imags/img.jpg" var="img" /> (head) , <img src = "/imags/img.jpg" > (body)
<br>
-->
Here is the second comment section:
<!-- 2nd comment section -->
<!-- PROBLEM WITH GET
<img src="<c:url value='./webapp/images/img.jpg' />">
<img alt="<c:url value='/webapp/images/img.jpg' />" src="<c:url value='/webapp/images/img.jpg' />">
<br>
<img src="<c:url value='./images/img.jpg' />">
<img alt="<c:url value='/images/img.jpg' />" src="<c:url value='/images/img.jpg' />">
<img src="<c:url value='images/img.jpg' />">
<img src="<c:url value='/images/img.jpg' />" alt="p">
<br>
<img alt="webapp/images/img.jpg" src="webapp/images/img.jpg"></img>
<img alt="<c:url value='/webapp/images/img.jpg' />" src="<c:url value='webapp/images/img.jpg' />">
<img alt="a" src="< %=request.getContextPath() %>/images/img.jpg">
<img alt="b" src='< %=request.getContextPath() + "/images/img.jpg" %> '>
<img alt="c" src="${pageContext.request.contextPath}/images/img.jpg" />
<img src="${pageContext.servletContext}/images/img.jpg"/>
<img src="${pageContext.servletContext}/webapp/images/img.jpg"/>
<input type="image" src="images/img.jpg" value="< %=getServletContext().getRealPath("/images/img.jpg") %>" name="img.jpg">
<input type="image" src="images/img.jpg" value="< %=getServletContext().getRealPath("/") %>">
-->
In the comments sections is everything I have tried but failed. In the 1st comment section the image is not displayed but no error is shown. When I run my project with a command of the 2nd comment section I get a warning message. For example if I try this:
<img src="<c:url value='./webapp/images/img.jpg' />">
I get this:
[http-nio-8080-exec-4] WARN org.springframework.web.servlet.PageNotFound - No mapping for GET /SpringMVC_Hibernate_Setup/%3Cc:url%20value='./webapp/images/img.jpg'%20/%3E
I have mostly tried to display the img.jpg from the webapp/images. I know that image folder in the WEB-INF is a big NO NO, but at this point I don't know what else to do.
Any help would be very appreciated!!!
EDIT!!!
this is the tutorial I followed: https://www.javaspringclub.com/spring-mvc-hibernate-mysql-example/
I made some changes, but the core is the same.

Related

Spring Boot not loading static files (CSS and JS)

So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.
I have already tried changing the path (as suggested in other similar questions) to something like #{css/styles.css} instead of #{/css/styles.css} but that did not work.
Does anyone know if I'm missing something here?
Below is the HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="#{/css/styles.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">Don't have account?
Signup Now
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/loginscript.js}"></script>
</body>
where is your css folder?
css, js should be in static folder
src
main
java
resources
static
css
i18n
img
js
templates
Add this in your head tag:
<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="#{/styles.css}">
Note: Above code will only work if styles.css present in below path:
|--resources
|--static
|--css
|--styles.css
This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="#{../static/css/styles.css}". Thanks to everyone who answered!

When logged in as a user the buefy stop working in Laravel using Vue

i recently learning about Laravel using vue...
I'm using Laravel 5.8,
Bulma 0.7.5,
Buefy 0.8.1, and
Vue
My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...
Here's are a few screenshots so you can see what I'm talking about...
Here's what it looks like when I'm logged-out
https://imgur.com/inOTzgv
and here's what it looks like when I'm log-in
https://imgur.com/Qgq52d4
Here's my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data() {
return {
auto_password: true,
password_options: 'keep'
}
}
});
and here's
My cpanel.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'EthicallySpeaking') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
</head>
<body>
<div id="app">
#include('inc.navbar')
#include('inc.messages')
#include('inc.side_navbar_cpanel')
<div id="app" class="cpanel-dashboard-area flex-container">
#yield('content')
</div>
</div>
#yield('scripts')
</body>
</html>
and here's the edit.php form that I'm having the issue with...
#extends('layouts.cpanel')
#section('content')
<section class="section">
<div class="container">
<div class="columns m-l-10">
<div class="column is-10">
<h1 class="title">Edit User Profile</h1>
</div><!-- end column is-10 -->
</div><!-- end columns -->
<hr/>
<div class="columns">
<div class="column">
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field ('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="text" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="field">
<b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user">
</p>
</div>
</div>
<button class="button is-success m-t-20">Edit User</button>
</form>
</div><!-- end column is-10 -->
</div><!-- end columns -->
</div><!-- end container -->
</section>
#endsection
I wanted to know if anyone know why this is happing?

display individual item in ng-repeat rendered list

I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!

Ajax request while session is expired returns <partial-response> XML plain to browser

This is what I'm getting in the browser after the page makes an Ajax request and the session has been timeout, I'm implementing OmniFaces FullAjaxExceptionHandler.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<partial-response id="j_id1">
<changes>
<update id="javax.faces.ViewRoot">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/WebWorkflow/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" /><link type="text/css" rel="stylesheet" href="/WebWorkflow/javax.faces.resource/css/xpm2.css.xhtml" /><script type="text/javascri
]]>
<![CDATA[
pt" src="/WebWorkflow/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.1.13&v=5.1.13"></script><script type="text/javascript" src="/WebWorkflow/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.1.13&v=5.1.13"></script><link type="text/css" rel="stylesheet" href="/WebWorkflow/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=5.1.13&v=5.1.13" /><script type="text/javascript" src="/WebWorkflow/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.1.13&v=5.1.13"></script> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /><script type="text/javascript" src="/WebWorkflow/javax.faces.resource/jsf.js.xhtml?ln=js"></script> <title>XPM </title></head><body><span id="j_idt10"><script language="javascript" type="text/javascript"> function faceletsDebug(URL) {day = new Date();id = day.getTime();eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=800,height=600,left = 240,top = 212');"); };(function() { if (typeof jsfFaceletsDebug === 'undefined') { var jsfFaceletsDebug = false; } if (!jsfFaceletsDebug) {var faceletsOrigKeyup = document.onkeyup;document.onkeyup = function(e) { if (window.event) e = window.event; if (String.fromCharCode(e.keyCode) == 'D' & e.shiftKey & e.ctrlKey) faceletsDebug('/WebWorkflow/error/expired.xhtml?facelets.ui.DebugOutput=1429028952601'); jsfFaceletsDebug = true; if (faceletsOrigKeyup) faceletsOrigKeyup(e); }; }})();</script></span> <div id="wrapper"> <div id="header"> <form id="headerForm" name="headerForm" method="post" action="/WebWorkflow/error/expired.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="headerForm" value="headerForm" /> <div id="headerContent"><img src="/WebWorkflow/javax.faces.resource/img/wf-logo.gif.xhtml" alt="" /><img src="/WebWorkflow/javax.faces.resource/img/header.gif.xhtml" alt="" /> <div id="welcome"> </div> </div> </form> </div> <div id="section"><div id="exceptionDialog" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container"><div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"><span id="exceptionDialog_title" class="ui-dialog-title">Exception: occured!</span><span class="ui-icon ui-icon-closethick"></span></div><div class="ui-dialog-content ui-widget-content"> Message: <br /> StackTrace: <button id="j_idt23" name="j_idt23" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="document.location.href = document.location.href;;window.open('/WebWorkflow/error/expired.xhtml','_self')"><span class="ui-button-text ui-c">Reload!</span></button><script id="j_idt23_s" type="text/javascript">PrimeFaces.cw("Button","widget_j_idt23",{id:"j_idt23",widgetVar:"widget_j_idt23"});</script></div></div><script id="exceptionDialog_s" type="text/javascript">$(function(){PrimeFaces.cw("Dialog","exceptionDialog",{id:"exceptionDialog",widgetVar:"exceptionDialog",height:"500px"});});</script> <div id="sectionContent"> <form id="j_idt25" name="j_idt25" method="post" action="/WebWorkflow/error/expired.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt25" value="j_idt25" /> Your session has expired. You were on page Back to login page </form> </div> </div> <div id="footer"> <div id="footerContent"><img src="/WebWorkflow/javax.faces.resource/img/stagecoachsignature.gif.xhtml" alt="" /> <ul> <li> About My Company </li> <li> PRIVACY, Cookies, Security, Legal </li> <li> Online Access Agreement </li> <li> Contact Us </li> </ul> </div> </div> </div></body> </html>
]]>
</update>
<update id="j_id1:javax.faces.ViewState:0">
<![CDATA[ -1772475063786038199:-292459209620208926 ]]>
</update>
</changes>
</partial-response>
This is the error shown in the console:
FullAjaxExceptionHandler: An exception occurred during processing JSF
ajax request. Error page '/errorpages/expired.xhtml' will be shown.:
javax.faces.application.ViewExpiredException: viewId:/login.xhtml -
View /login.xhtml could not be restored.
I solved by disabling FullAjaxExceptionHandler and implementing my own ViewExpiredExceptionHandler (ExceptionHandlerWrapper), and hardcoding the response in case of an Ajax request.
The Douglas Junior answer from this post is what worked for me: Session timeout and ViewExpiredException handling on JSF/PrimeFaces ajax request
Now I have another problem with the redirects, but that would be another post, thanks guys for the help.

Adding Facebook like button hides other site content

I am using the latest version of BlogEngine.NET, and I want the share buttons of Facebook, linked in, Google Buzz, etc. to go below the menu, but after adding the Facebook, LinkedIn, and Buzz button code, the content next to it disappears. It seems BlogEngine.NET prevents entering script tags or something so this would be a limiting issue. How can this be fixed?
The code is below, see the BUTTON CODE section.
<code>
<div class="login">
<span runat="server" id="aUser"></span><a runat="server" id="aLogin" />
</div>
<ul>
<li><a1 href="<%=Utils.AbsoluteWebRoot %>" rel="home"><%=Resources.labels.home %></a></li>
<li><a1 href="<%=Utils.AbsoluteWebRoot %>archive.aspx"><%=Resources.labels.archive %></a></li>
<li><a1 href="<%=Utils.AbsoluteWebRoot %>contact.aspx"><%=Resources.labels.contact %></a></li>
<li><img src="<%=Utils.ApplicationRelativeWebRoot %>pics/rssButton.png" alt="Feed" /><%=Resources.labels.subscribe %></li>
<li><%=Resources.labels.filterByApml %></li>
<% if (Utils.IsMobile)
{ %>
<li><blog:MobileThemeSwitch ID="MobileThemeSwitch1" runat="server" /></li>
<%
}
%>
</ul>
</div>
</code>
<!--BUTTON CODE -START-->
<code>
<div id="Div1">
<script src='linkedinurl' type='text/javascript' /> <script data-counter='right' data-url='mysiteurl' type='in/share' />
</div>
</code>
<!--BUTTON CODE -END-->
<code>
<div id="content">
<blog:SearchOnSearch runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<p id="footer">
Powered by BlogEngine.NET <%=BlogSettings.Instance.Version() %><br />
Theme by Mads Kristensen
</p>
</div>
</code>
You need to encode it:
Like this:
site.master
<div style="float:right; padding-left:10px" class="TwitterButton">
<div>
<a href="http://twitter.com/share" class="twitter-share-button" data-url=
<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %> data-text="
<%=Server.UrlEncode(Post.Title) %>"> Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
</div>
</div>
The output would look like this:
<div style="float:right; padding-left:10px" class="TwitterButton">
<div>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://www.kbdavis07.bloggersonline.com/post/Using-HitSniffercom-
with-BlogEngineNet.aspx" data-text="Using HitSniffer.com with BlogEngine.Net"
data-count="horizontal">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
</div>
</div>
This code above is for Twitter, and I don't have a working example of LinkedIn code.
But it should be about the same.

Resources