#Import Alias on Local Images?

15 messages · Page 1 of 1 (latest)

nova gust
#

I continually get the error LocalImagesUsedWrongly when I follow guide on images on the docs page. I've tried with and without import aliases, but in all cases, I still get the same error:

src/components/Host.astro

---
const {host} = Astro.props;
import {Image} from "astro:assets";
const {Content} = await host.render();
---

<div class="host">
    <h2>{host.data.name}</h2>
    <Image src={host.data.image} alt={host.data.name}/>
    <Content/>
</div>

src/content/hosts/danielle.md

---
name: Danielle
image: "@images/hosts/danielle.jpg"
---

The image exists in /src/assets/images/hosts/danielle.jpg.

/tsconfig.json:

{
    "extends": "astro/tsconfigs/strict",
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@assets/*": ["assets/*"],
            "@images/*": ["assets/images/*"],
            "@config": ["config.ts"],
            "@components/*": ["components/*"],
            "@content/*": ["content/*"],
            "@layouts/*": ["layouts/*"],
            "@pages/*": ["pages/*"],
            "@styles/*": ["styles/*"],
            "@utils/*": ["utils/*"]
        }
    }
}
clear tree
#

did you update your content schema

nova gust
#

Yes, I did:

const authorCollection = defineCollection({
    type: "content",
    schema: function({image: imageFunction}){
        return z.object({
            name: z.string(),
            image: validatedImage(imageFunction).optional()
        });
    }
});

export const collections = {
    events: eventCollection,
    authors: authorCollection
};
#

And:

const OG_IMAGE_CONSTRAINTS = {
    width: 1200,
    height: 630
};


const validateImage = function(image: {width: number; height: number}) {
    return image.width >= OG_IMAGE_CONSTRAINTS.width && image.height >= OG_IMAGE_CONSTRAINTS.height;
};

const validatedImage = function(image: ImageFunction, constraints: {minimumHeight: number; minimumWidth: number} = {minimumWidth: 600, minimumHeight: 1000}) {
    const incorrectSizeErrorMessage = `image must be at least ${constraints.minimumWidth} X ${constraints.minimumHeight} pixels!`;
    return image().refine(validateImage, {message: incorrectSizeErrorMessage}).or(z.string());
};
golden shell
#

Seems overly complicated. You can just do something like:

const authorCollection = defineCollection({
  type: "content",
  schema:  ({ image }: SchemaContext) => z.object({
    name: z.string(),
    image: image()
      .refine((im: ImageMetadata) => im.height >= OG_IMAGE_CONSTRAINTS.height && im.width >= OG_IMAGE_CONSTRAINTS.width, { message: `image must be at least ${constraints.minimumWidth} X ${constraints.minimumHeight} pixels!`
      }),
      .optional()
   });
});
nova gust
#

More than just one collection uses images, so I refactored it

#

@golden shell, even with the code you provided, I still get the LocalImageUsedWrongly error:

const authorCollection = defineCollection({
    type: "content",
    schema: ({image}: SchemaContext) => z.object({
        name: z.string(),
        image: image().refine((im: ImageMetadata) => im.height >= OG_IMAGE_CONSTRAINTS.height && im.width >= OG_IMAGE_CONSTRAINTS.width, {
            message: `image must be at least ${OG_IMAGE_CONSTRAINTS.width} X ${OG_IMAGE_CONSTRAINTS.height} pixels!`
        }).optional()
    })
});```
golden shell
#

What is the whole error message you're getting?

nova gust
#

Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received @images/hosts/danielle.jpg.
See Docs Reference
If you want to use an image from your src folder, you need to either import it or if the image is coming from a content collection, use the image() schema helper. See https://docs.astro.build/en/guides/images/#src-required for more information on the src property.
Stack Trace
LocalImageUsedWrongly: Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received @images/hosts/danielle.jpg.
at Object.validateOptions (C:\Users\seang\github\masksoff-dating-website\node_modules\astro\dist\assets\services\service.js:34:15)
at Module.getImage (C:\Users\seang\github\masksoff-dating-website\node_modules\astro\dist\assets\internal.js:69:68)
at async Module.getImage (C:\Users\seang\github\masksoff-dating-website\

Docs
Images

Learn how to use images in Astro.

golden shell
#

Hmm... the last time I saw this (maybe last week?), there was something wrong with the config.ts file, and so it was as if it was never loaded and schema wasn't applied, therefore the image was just a string instead of image() helper function, so {host.data.image} was a string instead of ImageMetadata.

I think in that case the OP misnamed (i.e. typo) the collection on the export.

#

Looking at the above code, you have authors: authorCollection, but src/content/hosts/danielle.md. Is it authors or hosts?

clear tree
#

typically it means that the image is just a string vs an actual resolved image

nova gust
#

Derp 🧓 -- misnamed the damn collection 🤦

Well, that fixed the issue! Thanks!

#

Aliases do, indeed, work in frontmatter