#Image path

59 messages · Page 1 of 1 (latest)

vivid adder
#

I have the following issue.
In my website, I have these images: https://myndi.dev/about/#My-projects

They're optimized with Astro Image on build using:

<Image src={`${src}`} width={200} height={300} alt={`${alt}`} position="top" class="img-about" format="webp" quality={100}/>

And when clicking on them, they pop-up and you get an unoptimized (the original) version, through:

imgWrappers.forEach(wrapper => {
  wrapper.addEventListener('click', () => {
    const img = wrapper.querySelector('img');
    const src = img.getAttribute('src').split('&href=')[1];
    const decodedSrc = decodeURIComponent(src);
    console.log(decodedSrc);
    expandedImg.setAttribute('src', decodedSrc);
    dialog.showModal();
  });
});

The problem?

They don't show up in production.
In local host, I'm able to see the image thanks to the JS function, because it refers to the /public folder.

I store them dynamically in a dialog box to have some sort of preview.

What is happening?

The decoded version gives me the following path for the image /images/image.png, but on built time this paths gets changed. So in production the src path is undefined.

Does anyone have a suggestion or a better way to achieve this?
Or perhaps, how could I reference the path after it has been built?

Reasoning

The only reason I'm doing this, is because I want to access the full length of the image when showing the preview, since the Image component cuts it.

My Astro Page
About me

About me page

rose sealBOT
#
Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

somber chasm
#

I don't know where src come from in your example, but I'm assuming it's a local imported image, in which case you can access the path to them with src.src

vivid adder
#

From a config.js file:

      { title: "💼 Blogfolio", shortDescription: "Blogfolio template created with Astro", 
        src: "/images/blogfolio.png", alt: "Blogfolio website", 
        repository: "https://github.com/Myntsu/myndi", 
        liveDemo: "https://myndi.dev/" },
somber chasm
#

Oh, so they're public images

#

In which case you're not getting optimization anyway

vivid adder
#

Really? D: But they change the format and width based on the component

#

is there more to it?

somber chasm
#

with imported images, you would have been able to do simply

---
import myImage from "../something.png";
import { Image } from "astro:assets";
---

<a href={myImage.src}>
  <Image src={myImage} alt="something" />
</a>
somber chasm
vivid adder
#

This is using the, soon to be deprecated, astro image.

somber chasm
#

oooh, yeah @astrojs/image did support public images

vivid adder
somber chasm
#

That's true, I forgot about that

vivid adder
#

My assumption is that they do

#

Since their original format is .png

somber chasm
#

astro:assets doesn't on purpose

vivid adder
#

The thing is, I'm okay with the preview image being optimized, but I want the preview to be the raw image

#

And I don't know how else I could approach this

somber chasm
#

If the images are in public, can't you just link to them?

#

You could add them as a data attribute perhaps (the original link I mean)

vivid adder
#

But if they're being targetted by the component, they leave the public folder no?

somber chasm
#

The optimized versions do, the raw versions still stay in public

vivid adder
#

This is the live version

#

And when I log it, I get the right route (on localhost)

# 
    console.log(decodedSrc);
    expandedImg.setAttribute('src', decodedSrc);
    console.log(expandedImg);
    dialog.showModal();

On this part of the function

#

But on production is just gives me undefined, making me think they're moving elsewhere

somber chasm
#

<Image src={"/something.png"} /> will generate a separate file for something.png and rewrite the path, but /something.png should still exist as a physical file

#

In your dist folder, you should see the original image somewhere

vivid adder
#

_astro is the dist folder, right? On the live site

somber chasm
#

_astro is in the dist folder

#

Typically only has generated assets in it

vivid adder
#

that's the live site

#

and this is remote

somber chasm
#

This is the original image ^

#

at https://myndi.dev/images/blogfolio.png

#

and the generated optimized one is at https://myndi.dev/_astro/blogfolio_Z1puyPD.webp

#

so you could just link to the original image for when the user click

#

so you could do something like <Image src={src} data-original={src} /> and then get the original path through the data attribute

#

(or store it somewhere else, whichever works best)

vivid adder
#

hmm so I would have to target the data attr with the fn instead

#

I will give that a try then

vivid adder
#

I couldn't find it in the inspector

somber chasm
#

The inspector only shows resources that are linked to

somber chasm
#

since public always gets copied as-is, the end URL ends up being the one I linked

vivid adder
#

so you simply typed that in the browser?

somber chasm
#

Yes

vivid adder
#

ah lmao okay

#

I was overthinking it then

#

thank you so much :3

#

@somber chasm it worked! Thank you!