I am trying to migrate a project of mine from pure HTML/CSS/Javascript to a Spring MVC application with Thymeleaf.
I am not understanding why my Thymeleaf template is loading some images and some not.
I have checked the syntax and I don't believe that's the problem.
All images are stored in the same folder.
resources
|
|-------- static
|
|---- images
|---- image1
|---- image2
|---- and so on
The syntax I am using to refer to those images is:
<img th:src="#{/images/image1.jpg}" />
And also:
<div th:style="'background:url(' + #{/images/image2.jpg} + ');'"
It's a couple of days I am dealing with this issue and the weirdest part is that a few images have just fixed, no idea how, no change from me. I wonder if other tiny bugs, like wrong html syntax elsewhere, may be causing the problem.
Any ideas?
Thank you for your time and experience.
Related
I am facing a very strange issue with my angular2 app.
Some users browsing the app with cellular-data can't access the css nor the images because the SRC properties are changed by the FAI in order to reduces its bandwith usage.(which is illegal by the way)
For instance the image's src : ./app/image/logo.png,
Becomes : http://91.68.208.10/bmi/your-host/app/image/logo.png
Which does not works!
91.68.208.10 belongs to SFR a french FAI.
The point is the app works well over wifi/ethernet/other 4G networks.
Their hack usually works well for other web sites otherwise we would have hear of it ages ago. So I think their should be an issue between this rewriting and the angular specific navigation / url pattern.
Especialy because External ressources from other website (ASOS, Nike, etc) does not works either when called throught angular app.
Any idea how I could change or rewrite my url so the FAI hack will not break the webpage ?
Thank you
I have an annoying problem with my new grails app. I'm trying to mock up a design for a site that I will be making but whenever I do changes in my css it won't affect the running application. No matter how big changes I do I have to stop the application and then run it again.
This is very frustrating, I've turned of cache in Chrome and even if I go to the specific document the resource is still the old. What can I do to solve this problem? I can make changes in my gsp files and the changes will appear but not in my css.
I am currently loading the resource within a layout file like this:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'app.css')}" type="text/css">
If you need me to provide any more information, please just ask. I am using grails 2.2.0.
Add this to your Config.groovy (probably just for development)
grails.resources.debug = true
Read the docs for more info.
It looks like Gregg's answer doesn't work for 1.3.7 (maybe that is something added in 2.x?). A method I found that makes quick CSS updates possible is to include a separate GSP as a template in the page header.
That is, create a file called "_css.gsp" (underscore prefix is required) in the same directory as your view files, fill it with standard css surrounded by html style tags, and then include the following in your layout header or page:
<g:render template="css" />
With that in place, the content of _css.gsp is injected into the page. And I can make changes to _css.gsp and they are immediately reflected after page refresh without having to restart Grails. Hope this helps someone in Grails pre-2.x!
I've been searching for a good architecture models for some time. I think that in a good application should have controllers and modules which should be repeatable parts on different pages. For example a shopping cart - if you are working on an online store you would need it on almost every page.
Also another requirement for me is that it should support changing styles (themes|skins) of the website easily - which can be achieved by deciding the style in two parts - views and assets (css, images, javascript). Which means that all the views should be located on one place, not like in Modular Extension.
And finally it's directory structure should look like this:
application/
├────controllers/
| ├────home.php
| └────products.php
├────modules/
| └────shopping-cart.php
└────views/
└────style_blue/
├────home.php
├────products.php
└────modules/
└────shopping-cart.php
assets/
└────style_blue/
├────css/
| └────style.css
├────js/
| └────jquery.js
└────images/
└────header.png
This is the perfect architecture isn't it?
It can be extended with new modules and controllers.
It can have different styles (skins|themes)
It is pretty simple and in the same time functional
I am a big fan of CodeIgniter and I want to achieve something like that with it. Is there an add-on which could work for me?
You could check http://www.getsparks.org for some add-ons.
I believe this is what you need for your custom styles:
http://getsparks.org/packages/template/versions/HEAD/show
It can handle multiple themes according to the description. Furthermore this library is very handy. (I am using it, just didn't use the theme part yet).
Furthermore, for modules maybe this is what you need?
https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc/wiki/Home
I'm trying to use the elRTE widget in my Grails 2.0.3 app.
I've put the images in the web-app/images
The problem is some of the images display, and some don't, and I have no idea why
So for example:
<r:img uri="/images/smileys/evilgrin.png"/>
<r:img uri="/images/smileys/unhappy.png"/>
<img src="/block/static/images/smileys/evilgrin.png" />
<img src="/block/static/images/smileys/unhappy.png" />
evilgrin.png shows up just fine with either the <r:img /> tag or the <img /> tag, but unhappy.png, which is in the same directory does not.
For that matter, evilgrin.png wasn't showing up but while trying to figure out why, it suddenly appeared. Again, I have no idea why.
The elRTE toolbar shows up fine, but the drop-down menu with the smileys to insert doesn't, except for evilgrin.
Can anyone shed any light?
I'm using Grails 2.0.3 from within SpringSource Tool Suite 2.9.1 (eclipse) on Windows 7.
This behavior is likely due to some of the confusion surrounding the current use of ad-hoc, legacy, and undeclared resources in the Resources plugin. The 1.2 release (out soon) will contain further documentation of these behaviors.
The safest bet is to declare the images folder in the ad-hoc filter settings like:
grails.resources.adhoc.patterns = ["/images/*", "*.css", "*.js"]
(which is the default setting).
Then access the images using the <r:img> tag. Do not use the <img> tag with a src such as that given above.
You can test which actual URIs are being served from the application by using a curl command. The first attempt to access a URI like /images/smiles/evilgrin.png should produce a redirect to /static/images/smilies/evilgrin.png. The image should be served from this latter URI.
I've embedded several views in a library so that I can re-use across projects using this method which works OK:
http://www.wynia.org/wordpress/2008/12/aspnet-mvc-plugins/
But one view usings a Javascript file. I've tried marking this as an embedded resource and adding it AssemblyInfo.cs and then referencing this resource using
<%= ClientScript.GetWebResourceUrl(this.GetType(), "FullPath.FileName.js")%>
This is literally displaying this output in the view
WebResource.axd?d=nUxqfqAUQLabLU54W
I think this is because Im trying to refer to an embedded resource from an embedded resource.
Help appreciated as Im going round in circles..
Steve
The problem here was with my call to GetWebResourceUrl. I've changed the format to that below and it works fine :)
<script src="<%= ClientScript.GetWebResourceUrl(typeof(Opal.Web.Shared.AClassInMyAssembly), "FullPath.FileName.js")%>" type="text/javascript"></script>
So Ive contained the call in a script tag and changed the type parameter.