Cannot read properties of undefined (reading 'url') when trying to get image

I am using pug to get image
my pug code

  .home
    .home__wrapper
      each section in home.data.body
        if section.slice_type = 'content'
          section.home__content
            .home__content__wrapper
              h1.home__content__title=section.primary.content_title

              span.home__content__label=section.primary.content_label

              p.home__content__description=section.primary.content_description

              figure.home__content__media
                img.home__content__media__image(class=`${section.primary.type = 'Left' ? '.home__content__left-image' : '.home__content__center-image'}` src=section.primary.image)

I get Cannot read properties of undefined (reading 'url') undefined error when i pass this in src
section.primary.content_image.url or section.primary.content_image.image.url or section.primary.image.url ( in this one sometimes shows but witha highlight image which isn’t even fetched in by pug )

[0] [
[0]   {
[0]     slice_type: 'content',
[0]     slice_label: null,
[0]     items: [ {} ],
[0]     primary: {
[0]       content_title: "It's a\n" +
[0]         'tequilla -\n' +
[0]         'based\n' +
[0]         'terpene -\n' +
[0]         'based\n' +
[0]         'ready-to-drink\n' +
[0]         'sparkling\n' +
[0]         'cocktail',
[0]       content_label: null,
[0]       content_description: null,
[0]       image: [Object]
[0]     }
[0]   },
[0]   {
[0]     slice_type: 'highlights',
[0]     slice_label: null,
[0]     items: [ [Object], [Object], [Object] ],
[0]     primary: { highlights_image: [Object] }
[0]   },
[0]   {
[0]     slice_type: 'content',
[0]     slice_label: null,
[0]     items: [ {} ],
[0]     primary: {
[0]       content_title: null,
[0]       content_label: 'Terpene',
[0]       content_description: 'lorem \n',
[0]       image: [Object]
[0]     }
[0]   }
[0] ]

this logs when i try to console.log(home.data.body)

everything else is rendering to the localhost except image and when i do this section.primary.image.url it renders image along with the image in highlights which api id is highlights_image

ahh :tired_face: prismic is testing my patience now i am frustrated of making same document again and again @Prismic-Support-Team

the error i am facing now it always compains me about the image that url is not defined :angry:

at the first time it was working the time i updated the document it started giving me errors

right now it complaining about this the time i add this one it will complain about another image

        if section.slice_type = 'content'
          section.home__content
            .home__content__wrapper
              span.home__content__label=section.primary.content_label

              p.home__content__description=section.primary.content_description

              figure.home__content__media
                img.home__content__media__image(src=section.primary.content_image.url)

y its teasing me with the unexpected errors :frowning:

and when i remove both of the slices everything works fine like nothing happened


slice highlights image api id

Screenshot 2565-02-22 at 12.28.27 AM
slice content image api id

this logs in console when i do this console.log(home.data.body)

[0] [
[0]   {
[0]     slice_type: 'highlights',
[0]     slice_label: null,
[0]     items: [ [Object], [Object], [Object] ],
[0]     primary: { highlights_image: [Object] }
[0]   },
[0]   {
[0]     slice_type: 'content',
[0]     slice_label: null,
[0]     items: [ {} ],
[0]     primary: {
[0]       content_label: 'Terpene',
[0]       content_description: 'Terpenes are aromatic compounds present in many plants, \n' +
[0]         'but especially strong in cannabis. They are the green, \n' +
[0]         'grassy goodness you smell whenever you light up\n' +
[0]         'a bong. El Hempe infuses that goodness into its seltzer.\n' +
[0]         'To give our tequila cocktail a complex mix of fragrant \n' +
[0]         'herbal notes that stun the senses like a bouquet of joints.',
[0]       content_image: [Object]
[0]     }
[0]   }
[0] ] highlights

help me @Prismic-Support-Team

why the heck it always complains about .url where am tryna push them into assets

  const assets = [];

  home.data.body.forEach(section => {
    if (section.slice_type === 'highlights') {
      section.items.forEach(item => {
        assets.push(item.highlight_images.url);
      });
    }

    if (section.slice_type === 'content') {
      assets.push(section.primary.highlights_image.url);
    }
  });

Hello @ojasshukla211

Thanks for reaching out to us.

I can see highlight_images in the primary, not in the items. You need to template it like that:
primary.highlight_images.url and you need to remove forEach for that too because it's not an array.

And another issue I see in the content slice type, where you have given the image API ID as content_image, not as a highlight_images. You need to template it like that:

primary.content_image.url

Let me know if you have any questions.

Thanks,
Priyanka

I apologies if i not able to explain whats giong on here so the thing is i am using images all over the slice except the title slice and i giving the exact thing maybe its related to validation and idk whats that

I can see highlight_images in the primary , not in the items

Its in items highlight_images

watch this maybe this can able to explain you whats going on here

@ojasshukla211 Can you send me a complete API response?

/home

[0] {
[0]   id: 'YhPWBREAACIAZ4Ff',
[0]   uid: null,
[0]   url: null,
[0]   type: 'home',
[0]   href: 'https://el-hempe.cdn.prismic.io/api/v2/documents/search?ref=YhSMEhEAAB8Aaq_r&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YhPWBREAACIAZ4Ff%22%29+%5D%5D',
[0]   tags: [],
[0]   first_publication_date: '2022-02-21T18:12:25+0000',
[0]   last_publication_date: '2022-02-22T07:09:06+0000',
[0]   slugs: [ 'home' ],
[0]   linked_documents: [],
[0]   lang: 'en-us',
[0]   alternate_languages: [],
[0]   data: {
[0]     title: "It's a\n" +
[0]       'tequila -\n' +
[0]       'based\n' +
[0]       'terpene -\n' +
[0]       'infused\n' +
[0]       'ready-to-drink\n' +
[0]       'sparkling\n' +
[0]       'cocktail',
[0]     image: {
[0]       dimensions: [Object],
[0]       alt: null,
[0]       copyright: null,
[0]       url: 'https://images.prismic.io/el-hempe/4b4adcf6-9177-4628-ab15-9d0520acce55_1.png?auto=compress,format'
[0]     },
[0]     body: [ [Object], [Object] ]
[0]   }
[0] }

home.data.body

[0] [
[0]   {
[0]     slice_type: 'highlights',
[0]     slice_label: 'highlights',
[0]     items: [ [Object], [Object], [Object] ],
[0]     primary: { highlights_image: [Object] }
[0]   },
[0]   {
[0]     slice_type: 'content',
[0]     slice_label: null,
[0]     items: [ {} ],
[0]     primary: {
[0]       content_label: 'Terpene',
[0]       content_description: 'Terpenes are aromatic compounds present in many plants, \n' +
[0]         'but especially strong in cannabis. They are the green, \n' +
[0]         'grassy goodness you smell whenever you light up\n' +
[0]         'a bong. El Hempe infuses that goodness into its seltzer.\n' +
[0]         'To give our tequila cocktail a complex mix of fragrant\n' +
[0]         'herbal notes that stun the senses like a bouquet of joints.',
[0]       content_image: {}
[0]     }
[0]   }
[0] ]

haven't added more of the content to this route because i not able to resolved the issue with the first slice

@Priyanka hi if you need anything please atleast ping me for that

Hi Ojas,

The issue here is that you are specifying the Slice Type content in your templating, but from looking at your api repsonse in the browser the content_image` field is empty:

https://el-hempe.prismic.io/api/v2/documents/search?ref=YhTZNxEAACgA1DP6&q=[[at(document.type%2C+"home")]]#format=json

This would need to be assets.push(section.primary.content_image.url); if it existed.

But since it doesn't have any content it will still throw an error.

sir it stills throws the error it was silly of me that i forgot to add a image in content_image when i remade the document last time

error and other things

[0] [
[0]   {
[0]     slice_type: 'highlights',
[0]     slice_label: 'highlights',
[0]     items: [ [Object], [Object], [Object] ],
[0]     primary: { highlights_image: [Object] }
[0]   },
[0]   {
[0]     slice_type: 'content',
[0]     slice_label: null,
[0]     items: [ {} ],
[0]     primary: {
[0]       content_label: 'Terpene',
[0]       content_description: 'Terpenes are aromatic compounds present in many plants, \n' +
[0]         'but especially strong in cannabis. They are the green, \n' +
[0]         'grassy goodness you smell whenever you light up\n' +
[0]         'a bong. El Hempe infuses that goodness into its seltzer.\n' +
[0]         'To give our tequila cocktail a complex mix of fragrant\n' +
[0]         'herbal notes that stun the senses like a bouquet of joints.',
[0]       content_image: [Object]
[0]     }
[0]   }
[0] ]
[0] [
[0]   'https://images.prismic.io/el-hempe/2566361b-317e-4fee-a746-8cbc549f7aa4_401_52815327.jpeg?auto=compress,format',
[0]   'https://images.prismic.io/el-hempe/490bd13b-12e2-482a-9ff6-cd52c40afc94_Asset+5%402x.png?auto=compress,format',
[0]   'https://images.prismic.io/el-hempe/2ee4ec4c-8d40-4748-9654-31c923127f03_Asset+1%402x.png?auto=compress,format',
[0]   'https://images.prismic.io/el-hempe/54b20936-ac2a-457c-b6ed-0be9e19227c5_2.png?auto=compress,format'
[0] ]
[0] GET / 500 3039.072 ms - 1925
[0] TypeError: /Users/desartist22/Documents/GitHub/el-hempe/views/pages/home.pug:25
[0]     23| 
[0]     24|               figure.home__highlights__media
[0]   > 25|                 img.home__highlights__media__image(src=section.primary.content_image.url)
[0]     26| 
[0] 
[0] Cannot read properties of undefined (reading 'url')
[0]     at eval (eval at wrap (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:82:128)
[0]     at eval (eval at wrap (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:111:4)
[0]     at template (eval at wrap (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:122:7)
[0]     at Object.exports.renderFile (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/pug/lib/index.js:454:38)
[0]     at Object.exports.renderFile (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/pug/lib/index.js:444:21)
[0]     at View.exports.__express [as engine] (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/pug/lib/index.js:493:11)
[0]     at View.render (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/express/lib/view.js:135:8)
[0]     at tryRender (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/express/lib/application.js:640:10)
[0]     at Function.render (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/express/lib/application.js:592:3)
[0]     at ServerResponse.render (/Users/desartist22/Documents/GitHub/el-hempe/node_modules/express/lib/response.js:1012:7)

my pug

      each section in home.data.body
        if section.slice_type = 'content'
          section.home__highlights
            .home__highlights__wrapper
              h1.home__highlights__label=section.primary.content_label

              p.home__highlights__description=section.primary.content_description

              figure.home__highlights__media
                img.home__highlights__media__image(src=section.primary.content_image.url)

it not only complains about content but it also complains about highlights slice too

Hello @ojasshukla211

Your code looks good to me. I am not sure what is happening here. It is difficult for me to debug without your project source code. Could you please share either a GitHub repo or zip file of your project and also steps to start your project?

Thanks,
Priyanka