# Image rendering issue

**URL:** <https://community.prismic.io/t/image-rendering-issue/14882>\
**Category:** Developing with Prismic\
**Tags:** nodejs, javascript\
**Created:** [January 2, 2024, 4:01pm UTC](https://community.prismic.io/t/image-rendering-issue/14882 "2024-01-02T16:01:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cristiano.unk](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/cristiano.unk/32/6805_2.png) [@cristiano.unk](https://community.prismic.io/u/cristiano.unk)\
**Post date:** [January 2, 2024, 4:01pm UTC](https://community.prismic.io/t/image-rendering-issue/14882/1 "2024-01-02T16:01:24Z")

</div>

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

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://github.com/crisunk/Portifolio/)]

[https://unkcc.cdn.prismic.io/api/v2](https://unkcc.cdn.prismic.io/api/v2)

Thank you guys.

 ![issue](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/9167ea27a4537fadd99efea74996837049eb39b5.jpeg)

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [January 2, 2024, 10:02pm UTC](https://community.prismic.io/t/image-rendering-issue/14882/2 "2024-01-02T22:02:52Z")

</div>

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:

```auto
			.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:

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

```

---

<div class="post-metadata">

**Author:** ![cristiano.unk](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/cristiano.unk/32/6805_2.png) [@cristiano.unk](https://community.prismic.io/u/cristiano.unk)\
**Post date:** [January 2, 2024, 10:29pm UTC](https://community.prismic.io/t/image-rendering-issue/14882/3 "2024-01-02T22:29:36Z")

</div>

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