Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

image display issues

Avatar

Level 2

I have an image stored in the DAM that will not display in my Slideshow component.  It displays if I use the foundation General > Image component in a parsys, but not in the Slideshow.  2 out of the 3 images display.  I have tried renaming the image, uploading it from outside of CQ, no success.  Can someone point me in the right direction!  I looked at the images permissions and everything seems fine.

I have tried hard coding the image onto the page and inserting it using the component, all with the same result - broken image icon.

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hmm, seems like there is nothing wrong with the code. Did you look at the renditions for each file in the dam and what does the log say ? In the DOM can you see what the page looks like HTML-wise. Is there an image there at all but with no height etc ?

Also, have you tried to use the build in functionality for the image class (draw). I use the function  image.draw(out) to draw the image. Can you try this and see if it helps ? 


 

View solution in original post

5 Replies

Avatar

Correct answer by
Level 7

Hmm, seems like there is nothing wrong with the code. Did you look at the renditions for each file in the dam and what does the log say ? In the DOM can you see what the page looks like HTML-wise. Is there an image there at all but with no height etc ?

Also, have you tried to use the build in functionality for the image class (draw). I use the function  image.draw(out) to draw the image. Can you try this and see if it helps ? 


 

Avatar

Level 2

Of course.  Here is the code for the slideshow jsp file:

<%@include file="/libs/foundation/global.jsp"%> <%@ page import="com.day.cq.wcm.foundation.Image"%><% // image will live on a resource (called image) below the requested resource Image image = new Image(resource, "image"); Image image2 = new Image(resource, "image2"); Image image3 = new Image(resource, "image3"); String filePath = image.getFileReference(); String filePath2 = image2.getFileReference(); String filePath3 = image3.getFileReference(); // setting the selector so that the "parbase" can work its magic image.setSelector(".img"); image2.setSelector(".img"); image3.setSelector(".img"); %> <div id="slideMain"> <div class="slide"> <img src="<%= filePath %>" alt="<%= properties.get("./image/alt") %>" title="<%= properties.get("./image/jcr:title") %>" /> <div class="labelSlider"> <h2><%= properties.get("./image/jcr:title") %></h2> <p><%= properties.get("./image/jcr:description") %></p> </div> </div> <div class="slide"> <img src="<%= filePath2 %>" alt="<%= properties.get("./image2/alt") %>" title="<%= properties.get("./image2/jcr:title") %>" /> <div class="labelSlider"> <h2><%= properties.get("./image2/jcr:title") %></h2> <p><%= properties.get("./image2/jcr:description") %></p> </div> </div> <div class="slide"> <img src="<%= filePath3 %>" alt="<%= properties.get("./image3/alt") %>" title="<%= properties.get("./image3/jcr:title") %>" /> <div class="labelSlider"> <h2><%= properties.get("./image3/jcr:title") %></h2> <p><%= properties.get("./image3/jcr:description") %></p> </div> </div> </div>

The 1st image is a png.  The 2nd is a jpg and the 3rd (that doesn't display) is also a jpg.  I am fairly new to CQ and haven't set up any workflows and haven't created any renditions other than just uploading images to the DAM.  

Avatar

Level 7

Hello!
Would be great with some more information about you filetypes/renditions etc. for your image and the slideshow. What differs between the picture that doesn't work and the 2 others? Does it have all the necessary renditions, and can you access all of those without problems ? If not, then you might have re-run any rendition-workflows that you might have.
 

Avatar

Level 2

The image always throws a missing 404 error in the DOM.  I have tried hard coding the image into the page, same result.  I did try the built in image component and that did work.  I will try the image.draw(out) and see what happens.

Avatar

Level 2

image.draw(out); worked!  Thanks for your help!