Removed default card image and returns when deploying to Netlify

[jennjunod]

Heyo!

Wondering if you may have an idea of how to fix this issue 🤔

I updated my /blog page to use the images from the post itself instead of the default image used. Although it works locally, when I deploy it on Netlify, it goes back to having a default image.

What I want it to do (and does locally):

What I don't want it to do (and does when deploying on Netlify):

What I tried:

I went into node_modules/accessible-astro-components/Card.astro to update the image files there and in src/pages/blog/[...page].astro

src/pages/blog/[...page].astro is what deploys as https://jennjunod.netlify.app/blog/

I inspected the image and the file doesn't exist when I look for it locally or in a codespace
<div class="card__image"><img alt="" src="https://fakeimg.pl/640x360"></div>

[markteekman]

Hey @jennjunod 👋🏼

Thanks for submitting the issue 😄 It seems like you might want to be using the img attribute on the Card component to feed your images in there if that's possible? Changing the package in your node_modules might not lead to the desired results, because once you deploy to Netlify it runs an npm install and the changes you made in your local node_modules wont be there on the server 🤔

Here's an example of how I made a quick demo (but you should see if you can use the code to get the images from your posts instead of this array):

const postImages = [
  'https://cards.scryfall.io/large/front/7/5/7542b1d1-e34d-46dc-af24-1b718034c0e4.jpg?1730758324',
  'https://cards.scryfall.io/large/front/e/b/ebe83332-195e-4ac1-878f-f52eef62ce6a.jpg?1730758319',
  'https://cards.scryfall.io/large/front/6/a/6af7766e-7438-4128-a1f2-8b3b3ba3c650.jpg?1730758321',
]

<Card
  img={postImages[index % postImages.length]}
  url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
  title={post.title}
  footer={'userId:' + post.userId}
>
    {post.body}
</Card>

Let me know if you can work out a solution this way!