Spring web development images - image

Can anybody tell me or give me a link to go to which can tell me how to implement and display images step by step (I'm only beginning) on a webpage from a spring project
I'm using IntelliJ
Thanks

What's the URL of the page? The one that appears in the location bar of your browser?
That is the URL to which relative locations are resolved in the HTML code. So, if the URL is http://localhost/MyApp/foo.html, and the URL of the CSS inside the HTML code is ../../css/style.css, the absolute URL where the browse will try to find the CSS will be http://localhost/MyApp/../../css/style.css, which doesn't make sense.
I prefer always using absolute paths for images and CSS files (and other resources). Using JSTL, that makes it like
<link href="<c:url value='/css/style.css'/>" ...
The <c:url> tag takes care of prepending the application context (/MyApp) to the path.
Note that relative paths inside CSS files are not resolved relative to the page URL, but relative to the location of the CSS file itself. So the path in your CSS file is correct.

Related

Including jquery in .js file

I am trying to clone an object using
var newObject = jQuery.extend(true, {}, oldObject);
as per John Resig's answer to What is the most efficient way to deep clone an object in JavaScript? .
All the information I can find on using libraries in javascript only show how to use a library within an html file... as in:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
My code is in a .js file and i get the error that jQuery is not defined. How do I use jQuery within my .js file?
EDIT: I'm running this code in a server.js file on a node server. The server.js has an event handler that gives back the index.html file upon getting the "/" url. So the server.js file isn't included in the index.html file and therefore including jquery in the html file doesn't help me, if my understanding is correct.
You can't include it or link to it from within your .js file. You have to include it on the HTML page (<script src="/path/to/jquery"></script>), before you include your .js file.
Technically you could just copy and paste the jquery code above the code in your .js file, but it is usually a better idea to just include it on the page to avoid conflicts.

Hide directory in source code

Actually my question is How is folder path hidden ? Firstly I am using Joomla.
I found a website 4 months ago, so i don't remember name of the website which is Joomla site. They hide their folder path.
Between to head> sth. head(tags). If you look at source code, you can see this part. And then this part include template name.
For example:
<link type="text/css" href="http://www.site.com/templates/template_name/css/style.css" rel="stylesheet"></link>
So we can learn to what the name of the template. But they hide this part. When i looked this part(http://www.site.com/templates/template_name/css), i can see only /style.css.
Do you have any idea?
You need two things to accomplish that.
A (system) plugin, that changes every template related URL to the 'official' format, eg.
$url = str_replace('/templates/template_name/css/', '/style/', $url;
An .htaccess redirect reverting the change.
RewriteRule ^style/(.*)$ templates/template_name/css/$1 [R=301,L]
If you want obscure template names, and a few modules and plugins from HTML source, the easy way is use a CSS and JS compressor like jbetolo or RokBooster.
But keep in mind that you will make a bit more hader to find your template name, but still possible via other ways. Like some images if they are not compressed in HTML.

How to hide the image tag src attribute?

I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.

relative path in res:// in resource files

I use in my win32 application embedded IE (IWebBrowser2)
And I load resources from resorces by res:// protocol
My .res file looks like
index.html HTML "index.html"
foo.js HTML "foo.js"
And it works.
But I need add resource with relative path, something like
? HTML "img\logo.jpg"
Is it possible to add such resource? And how?
In my index.html I user code like
<img src="img/logo.jpg">

Favicon issue in website

I am using a favicon which is linked in all pages using <link> tag. This favicon is stored in a folder inside the root folder, and I have another favicon stored in the root folder also. When the site loads fully the favicon which I am referring to is shown correctly. But when I stop the site before loading completely then it shows the favicon from the root folder.
Is this the default/desired behavior?
Thanks
I'd say yes.
The only way the browser can find your correct favicon is by using the <link> tag. If that tag's not present or parsed correctly the browser will have to fall back on its default behaviour which is to look for a file called favicon.ico in the root folder.
I don't know about desired behaviour, but it is to be expected. The browser will request /favicon.ico by default, and the <link> is considered an override.
You will find for most browsers, they will actually fetch both, but display the <link> by preference.
Most browsers, if they don't find a <link rel="icon"> or <link rel="shortcut icon">, fall back on the old bog-standard of showing /favicon.ico . Some can be configured to avoid this (e.g. Opera has this in GUI config), some will look for /favicon.ico regardless.
This is an artifact of the Browser Dark Ages and no fault of your own.

Resources