I have a problem with Firefox browser and picture rendering in Grails web application.
Some of the pictures have "[" and "]" in filename. When I open web application in Chrome or Explorer, pictures are ok but not in Firefox.
My code looks like this:
GSP:
<img
src="${resource(dir:'documents/pictures',file:filename)}" alt="" />
Filename has square brackets.
I know that Firefox has problems with square brackets but is there a workaround?
Thank you.
Generated html:
<div class="col-md-6 product-image">
<div id="slikaTemp">
<br>
<a href="/application/static/documents/pictures/TETRIC_EVOCERAM__4ddb881283a15[1].jpg" title="">
<img src="/application/static/documents/pictures/TETRIC_EVOCERAM__4ddb881283a15[1].jpg" alt="" height="" width="450">
</a>
</div>
</div>
You can encode the filename so in your resource call, add something with java.net.URLEncoder.encode(filename) so the filename will be encoded
Related
Code:
<div class="about-img">
<img src="https://ella.sice.indiana.edu/~macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
When I open this as a file in my browser, I see the image just fine. But when I navigate to the published webpage, it is missing, and the alt text does not display either.
What am I doing incorrectly?
Try and remove the tilde and start over. Actually tilde '~' represents home directory. When you place tilde in url, It will access from home directory. So, put the picture in the macnaust/DevFolio/assets/img/ folder then change the src to
<img src="https://ella.sice.indiana.edu/macnaust/headshot.jpg" class="img-fluid
Try this: Change your code to below: If it works, then google up on relative vs absolute folder path.
<div class="about-img">
<img src="/macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
I am working on a project with a file manager(dropbox like), and i am using handlebars template to show each file that i am uploading into a div.
the problem is that i want to show a preview of the file in the web page but at this moment only images are showing. is there any other tags i could replace img with?
<div class="file">
<a href="{{upload.url}}" target="_blank">
<span class="corner"></span>
<div class="image">
<img alt="image" class="img-responsive" src="{{upload.url}}">
</div>
i am trying to replace the img alt to show a preview of a file (pdf, text, ect)
I think you could use an iframe like this.
<iframe src="{{upload.url}}"></iframe>
I have an image being displayed in my website which runs fine on Safari however when I run this in Firefox, Chrome, and Opera it does not display for me.
The code I have is:
<img class = "header" src="./images/websitelogo.jpg" alt=" Header Image"/>
Has anyone experienced this issue before and if so how did you resolve this?
Thank you very much.
It seems that your path is wrong. If you are working in index file ,and u have another folder with pictures ,there's no reeason for you to have "." and /.
<img class = "header" src="images/websitelogo.jpg" alt=" Header Image"/>
It should look like this.
Have you checked the console log. I think the problem is in the img src you are searching image in ./images/websitelogo.jpg, but the images folder is in the same hierarchy as your html page, So replace your src to images/websitelogo.jpg
<img class = "header" src="images/websitelogo.jpg" alt=" Header Image"/>
I have problem with Google translate urls... On my website I put 3 linked flags - one in my language, others in english and german. Strukture of my flags:
<div class="language">
<img src="img/pl.png" alt="" />
<img src="img/en.png" alt="" />
<img src="img/de.png" alt="" />
</div>
When I translate website first time - everything is OK. But when I click flag on "translated" website Google wants to translate url from href, not my url... And I get error "URL is invalid"... Any solutions?
I would be glad for help! Thanks!
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />