Image rendering issue

Developing with Prismic
,
1

Hi folks, I am new to Prismic and web development, I a just a designer trying to code my own portifolio :stuck_out_tongue:

I'm currently in the Prismic integration part with the front end, but I'm having problems rendering the images in HTML, my pug code is converted into HTML but without any link with the CMS images.

Interestingly, when I request the images via console.log, they respond back perfectly, pug itself sees that there are 4 images and creates 1 div for each one, but without rendering the image.

I'm sorry to come with this simple problem, but web development is still new to me, I'm using Express.js and Pug for templates in my project.

Can anyone tell me what I did wrong?

here is my project on github. [GitHub - crisunk/Portifolio]

https://unkcc.cdn.prismic.io/api/v2

Thank you guys.

issue
issue1563×1116 158 KB

2

Hi @cristiano.unk. I took a look and can see that the way you're accessing the misc_images isn't quite right. Here's a quick modification to your code that should work:

			.gallery__wrapper
				each item in home[2].data.gallery
					figure.misc__gallery__media(class=`home__gallery__media--${index % 3 + 1}`)
						img.about__gallery__media__image(alt=item.misc_images.alt src=item.misc_images.url)

Here's a little bit of code that you can add to the bottom of your home.pug file that lets you see the structure of your home object. It might help you to more easily see how to access any of the content you have there:

	pre.
		!{JSON.stringify(home, null, 2)}
3

Thanks @Levi . I was trying to resolve this for days without a clue for what i was doing wrong, almost giving up of prismic

and thanks again for the tip to show the .json file

1 Like