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

ojasshukla211 · February 21, 2022, 3:03pm

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)

ojasshukla211 · February 21, 2022, 3:07pm

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

ojasshukla211 · February 21, 2022, 6:56pm

ahh 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

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

ojasshukla211 · February 21, 2022, 6:57pm

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

ojasshukla211 · February 21, 2022, 6:59pm

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

ojasshukla211 · February 21, 2022, 6:59pm

help me @Prismic-Support-Team

ojasshukla211 · February 21, 2022, 7:36pm

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);
    }
  });

Priyanka · February 22, 2022, 5:27am

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

ojasshukla211 · February 22, 2022, 6:21am

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

Priyanka · February 22, 2022, 8:07am

@ojasshukla211 Can you send me a complete API response?

ojasshukla211 · February 22, 2022, 8:30am

/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] ]

ojasshukla211 · February 22, 2022, 8:32am

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

ojasshukla211 · February 22, 2022, 4:11pm

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

Phil · February 22, 2022, 5:34pm

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

Phil · February 22, 2022, 5:38pm

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

Phil · February 22, 2022, 5:38pm

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

ojasshukla211 · February 22, 2022, 6:24pm

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)

ojasshukla211 · February 22, 2022, 6:26pm

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

Priyanka · February 23, 2022, 4:41am

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

Fares · June 28, 2022, 2:19pm

Hi @ojasshukla211

This is Fares from the Support Team; I'm wondering if you have been able to resolve this issue. If not, let us know if you need any further assistance.

Topic		Replies	Views
Cannot read property 'data' of undefined Developing with Prismic nodejs	6	1768	December 9, 2021
Cannot read properties of undefined (reading 'lang') when trying to access project's detail Developing with Prismic nuxtjs	3	461	March 15, 2023
TypeError: Cannot read properties of undefined (reading 'find') Developing with Prismic typescript , nextjs	1	2324	October 19, 2022
Can't read property of undefined when refreshing page Developing with Prismic nuxtjs	9	885	December 9, 2021
Nuxt.js returning TypeError: Cannot read property 'url' of undefined Developing with Prismic nuxtjs	16	5054	December 9, 2021

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

Related Topics