Image appears in serve, not displayed in build?

[LorenAmelang]

I've added an image to the top of my landing page:

eleventy-base-blog/content/index.njk

{# <h1>Latest {{ latestPostsCount }} Post{% if latestPostsCount != 1 %}s{% endif %}</h1> #}
<h1><img src="Psyicon.jpg" alt="Icon made of four arcs curving in from the the sides of the image, symbolizing my struggle to connect peripheral space to my shattered central view." class="center">
<p style="text-align: center;">Psychoros<p>
<p style="font-size:50px";>The dancing ground of the soul</p></h1>

The image is in:
eleventy-base-blog/content/Psyicon.jpg

It works in the serve view (browser inspect):

<picture><source type="image/avif" srcset="/.11ty/image/?src=content%2FPsyicon.jpg&amp;width=500&amp;format=avif&amp;via=transform 500w"><source type="image/webp" srcset="/.11ty/image/?src=content%2FPsyicon.jpg&amp;width=500&amp;format=webp&amp;via=transform 500w"><img loading="lazy" decoding="async" src="/.11ty/image/?src=content%2FPsyicon.jpg&amp;width=500&amp;format=jpeg&amp;via=transform" alt="Icon made of four arcs curving in from the the sides of the image, symbolizing my struggle to connect peripheral space to my shattered central view." class="center" width="500" height="500"></picture>

When I build the same project, the image shows the tiny not found icon, and the Alt text is shown following it:

<picture><source type="image/avif" srcset="/aRCUHcwHWl-500.avif 500w"><source type="image/webp" srcset="/aRCUHcwHWl-500.webp 500w"><img loading="lazy" decoding="async" src="/aRCUHcwHWl-500.jpeg" alt="Icon made of four arcs curving in from the the sides of the image, symbolizing my struggle to connect peripheral space to my shattered central view." class="center" width="500" height="500"></picture>

The build version has no Psyicon.jpg, but has 3 versions of
eleventy-base-blog/_site/aRCUHcwHWl-500.jpeg/avif/webp

It is quite possible I've done something newbie stupid, but shouldn't the serve view and the built site agree on whether ir works or not?

Also, the three build versions of the image are tiny files and noticeably fuzzier than the original. Is there some way to avoid that transformation?

And... The image in the serve version is not centered, despite the class="center" option. Does that not work here?

Clues appreciated!

[gregoryhammond]

Here are a couple ideas to help (which helped me with my website):

• have you added a passthrough in your eleventy.config.js to get the image into the build folder? By default, the eleventy.config.js has one for anything in /public to the base folder.

• by default the eleventy.config.js has the eleventy-img plugin, which can be tricky for some people, if you uninstall and remove it, then build it again, does the image show? If not, it may require re-writing the image file location, then rebuilding.

• regarding it not being centered, it does work, but I would suggest adding an id to the paragraph (maybe call it centerThis) and doing the center inside the css. If you want to see a live example, go to my website, view developer tools, and inspect one of the coloured section on the homepage, you'll notice the css has the text-align of center.

[LorenAmelang]

Sorry it has been so long - I've had weeks of serious problems with my off-grid home power system...

I've figured out why the images don't appear. I run my own server, and want to continue serving the old site to the public while I test the new eleventy version.

I tried to set the base of the eleventy site to
https://www.psychoros.com/11
and copied the site folder to that server folder.

If I manually type in the /11 version of the URL, all of the site elements, including the images, are available there. But the internal links do not include the /11 and either fail or go to the old site.

Is there some way to tell Eleventy to base all of the site in that /11 folder?

[gregoryhammond]

You could use pathPrefix, which allows you to deploy to a subdirectory (/11 in your case).

I haven't used it, but it looks like it would fit your needs.