past hearth
hey everyone — i am an artist creating an archive for my astro site and i would like to give users the option to open images from my content collection in a new tab. however, i'm not sure how to handle the routing or if there is another way to achieve this. does anyone have any advice?
thanks.
dire thistle
It's unclear what the problem is.
past hearth
the vanilla build of my archive had the images wrapped in an anchor tag with the same route as the <img> that used "target=_blank" to open the image in a new tab. if i have a page that is generated from my content collection, what do i put in the href so i can then use target="_blank" on it when it's built, if that is possible?
dire thistle
images aren't links. You have to wrap them in a <a> tag, and there you can add the target attribute
<a href="" target="_blank">
<img src="" />
</a>
href and src can have the same value here.
You also might want to look at Astro's Image component for an optimized version of your image.
past hearth
images aren't links. You have to wrap them in a `<a>` tag, and there you can add...
yes, i am trying to wrap them in an anchor tag. i don't know what i put as the href when i'm trying to link to the image to use target blank.
the images are fine. i am trying to route a link.
dire thistle
if you want to link to the image src, then use the same in the href as in the <img src.
past hearth
i don't have an issue creating a link or returning an image using the image component. the issue is i do not know how to route to the image file once the site is built.
i can't do that when i'm passing props.
<a href={} target="_blank">
my question is what do i put in the {}. i can't route to the image once it's built.
i've tried putting {entry.data.src} but unless i am somehow doing that wrong it hasn't worked.
dire thistle
What does the img tag look like?
past hearth
i'm not using img, i'm passing the collection props using <Image />
<Image
src={entry.data.img.src}
alt={entry.data.img.alt}
/>
href={entry.data.img.src}
past hearth
in the Image itself? or in the anchor tag? i've tried that in the anchor tag but i'll try it again.
dire thistle
in the anchor, since only that element accepts a href attribute
if it doesn't work, share what errors you see, or what the value of the href is in your browser (inspect the element)
past hearth
@dire thistle here is the code:
<a href={entry.data.image.src} target="_blank">
<Image
src={entry.data.image.src}
alt={entry.data.image.alt}
/>
</a>```
the url fragment that is built from ``{entry.data.image.src}`` is ``/[object%20Object]`` like so:
``https://website.com/gallery/[object%20Object]``
the ``href`` also gives a typescript error 2322:
```javascript
Type '{ src: string; width: number; height: number; format: "png" | "jpg" | "jpeg" | "tiff" | "webp" | "gif" | "svg" | "avif"; }' is not assignable to type 'string | URL | null | undefined'.
the anchor tag cannot access {entry.data.image.src} because it's part of an object. i have no issues returning the object in the <Image /> tag.
dire thistle
ah you're right. I thought the src of the image was stored as a url inside the object, but it's the filepath
I asked the bot. It should work, but on production it will be a valid url. Locally, you'll see a filepath
Can you test it on a production environment?
past hearth
Can you test it on a production environment?
forgive the late response. for clarification, does "production environment" refer to running build?
if so, this also gives me https://website.com/gallery/[object%20Object].
correction, it's actually https://website.com/gallery/object Object
past hearth
Can you test it on a production environment?
i logged {entry.data.image.src} which returned:
{
src: '/@fs/D:/web development/gallery/src/content/entries/2021/05/14/rabbit2.png?origWidth=350&origHeight=550&origFormat=png',
width: 350,
height: 550,
format: 'png',
fsPath: 'D:/web development/gallery/src/content/entries/2021/05/14/rabbit2.png'
}
so i used {entry.data.image.src.src} and it worked.