book review grid granny advertise on coderanch thread boost polymorphism
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
book review grid meaningless drivel thread boost advertise on coderanch building better world book
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Bear Bibeault
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Jj Roberts
  • Carey Brown
Bartenders:
  • salvin francis
  • Frits Walraven
  • Piet Souris

Remove or replace Java's broken image icon

 
Ty Dee
Greenhorn
Posts: 3
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using a jEditor to display html lines.  An image is placed by statement like img src="images/silly.png" using HTML.  

    txtIntercom.setContentType("text/html");
    txtIntercom.setText("<html><body>" + str + "</body></html>";

str  might have like <img src="images/silly.png"> within the text.

For a brief second the broken icon appears and is then replaced by the actual graphic.  I get a brief jump in the text due to the broken image being displayed and then the image is loaded.

Is there a way to change so java does not display the broken image which is larger than the emoji and causes the bouncing or replace it with like a small black image of the same size of the emoji so the screen will not jump?

 
Tim Holloway
Saloon Keeper
Posts: 22989
156
I like...
Android Eclipse IDE Tomcat Server Redhat Java Linux
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try putting the tag inside a fixed-size <DIV>. And thank you for your consideration. I really, really hate web pages that bounce all around because they're loading stuff and having to resize to fit.

Some people, when well-known sources tell them that fire will burn them, don't put their hands in the fire.

Some people, being skeptical, will put their hands in the fire, get burned, and learn not to put their hands in the fire.

And some people, believing that they know better than well-known sources, will claim it's a lie, put their hands in the fire, and continue to scream it's a lie even as their hands burn down to charred stumps.

 
Bear Bibeault
Marshal
Posts: 67496
173
I like...
Mac Mac OS X IntelliJ IDE jQuery Java
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You might also just specify the known dimensions on the img element.

[Asking smart questions] [About Bear] [Books by Bear]

 
Tim Holloway
Saloon Keeper
Posts: 22989
156
I like...
Android Eclipse IDE Tomcat Server Redhat Java Linux
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:You might also just specify the known dimensions on the img element.



https://www.w3schools.com/tags/tag_img.asp

w3schools wrote:Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.



A caveat, though. Once long ago I worked on a webapp where the image real sizes were literally billboards - something like 30 feet x 25 feet, but the app original author wasn't aware of that, having drawn them with a program that scaled to fit. The page took forever to display, since these immense images were being reduced to fit the dimensions of the IMG tag and that involved a lot of graphics processing per image.

So while the dimensions on an IMG tag are authoritative, they absolutely must be compatible with the image itself. You may not experience long render times, but mismatches can result in reduced image quality as the page renderer tries to accomodate.

Some people, when well-known sources tell them that fire will burn them, don't put their hands in the fire.

Some people, being skeptical, will put their hands in the fire, get burned, and learn not to put their hands in the fire.

And some people, believing that they know better than well-known sources, will claim it's a lie, put their hands in the fire, and continue to scream it's a lie even as their hands burn down to charred stumps.

 
Bear Bibeault
Marshal
Posts: 67496
173
I like...
Mac Mac OS X IntelliJ IDE jQuery Java
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yup, which is why I said known dimensions. Otherwise, jiggering is unavoidable.

[Asking smart questions] [About Bear] [Books by Bear]

 
Ty Dee
Greenhorn
Posts: 3
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<div> worked ... kinda.

It does not jump between the no image icon and the emoji I am loading.  But it wraps so at the place in the line that the image is placed there is a newline and the image is on a line below.  I know there is a "display: inline-block" function but doesn't work.  It may be that the jEditor does not understand that.  I know I had to use <br> instead of <br /> for it to work.

Guess I could make the emoji the same height as the broken icon but isn't what I would like to do.

Thanks
 
Tim Holloway
Saloon Keeper
Posts: 22989
156
I like...
Android Eclipse IDE Tomcat Server Redhat Java Linux
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There are a couple of options, then if you have more than just a single image element you want on a "line".

One is to wrap them in a TABLE, so that the image and the side text (or whatever) occupy adjacent columns.

Another it to put the side text in a DIV of its own and give it a relative position to the side of the IMG DIV.

I'm sure that some other options exist, but I generally go with the TABLE approach. TABLE got unfairly treated when CSS first came out, but it does have its uses;

Some people, when well-known sources tell them that fire will burn them, don't put their hands in the fire.

Some people, being skeptical, will put their hands in the fire, get burned, and learn not to put their hands in the fire.

And some people, believing that they know better than well-known sources, will claim it's a lie, put their hands in the fire, and continue to scream it's a lie even as their hands burn down to charred stumps.

 
Paul Clapham
Marshal
Posts: 26278
80
I like...
Eclipse IDE Firefox Browser MySQL Database
posted 1 month ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Ty Dee wrote:I am using a jEditor to display html lines.



Just to clarify: this "jEditor" you're talking about is this one: JEditor - Rich Text Editor for Jira, right? Most of the references I found on the web pointed here, more or less. Or is it something else with a similar name?
 
Always! Wait. Never. Shut up. Look at this tiny ad.
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
reply
    Bookmark Topic Watch Topic
  • New Topic
Boost this thread!
Similar Threads
More...