Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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!