Problem with image paths when using a subfolder

[mluce194]

I had to upload my site files to a subfolder, so I used pathPrefix to get relative path urls. Now, my homepage looks fine but I still have issues with images inside posts. The image url is the same whether on the posts list on on the post page itself, which means that the image does not load inside the post. You can see the result here: http://styles-bijoux.com/blog/ On the list of posts, the images are fine but when I click on one of them and get inside the post, the image is not visible because the path is wrong. I think I am missing something regarding the url filter but I do not know what...

[daflh]

I've tested vredeburg with pathPrefix and that works well (see here). So, maybe there's something wrong with your source code.

I don't know what happen because I can't reproduce. But, is your blog open source? If not, can you provide snippet for /src/_includes/partials/post-grid.njk, /src/_includes/layouts/post.njk, and one of your markdown (with .md extension) post inside /src/posts/? So I can take a look and see what's the problem there.

[mluce194]

Ok, this is the content of my post-grid.njk file:

{% for item in paged.items %}
<div class="flex-single sm:flex-double md:flex-triple self-stretch p-2 mb-2">
    <div class="rounded shadow-md h-full">
        <a href="{{ item.url | url }}">
            <img class="w-full m-0 rounded-t lazy" src="{{ lazyImage }}" data-src="{% if item.data.thumb %}{{ item.data.thumb | url }}{% else %}{{ '/assets/img/no-image.svg' | url }}{% endif %}" alt="This post thumbnail">
        </a>
        <div class="px-6 py-5">
            <div class="font-semibold text-lg mb-2">
                <a class="text-gray-900 hover:text-gray-700" href="{{ item.url | url }}">{{ item.data.title }}</a>
            </div>
            <p class="text-gray-700 text-base mb-1" title="Published date">{{ item.data.page.date | readableDate }}</p>
            <p class="text-gray-800 text-tiny">
                {% if item.data.description %}
                {{ item.data.description }}
                {% else %}
                {{ item.templateContent | striptags | truncate(90, true) }}
                {% endif %}
            </p>
        </div>
    </div>
</div>
{% endfor %}

And this is a snippet of one of my markdown files:

---
title: "5 bonnes raisons d’offrir une bague à une femme"
date: "2017-02-07"
thumb: "offrir-une-bague.jpg"
tags: 
    - bague
    - femme
    - cadeau
---

### …Et qui ne sont pas une demande en mariage !

Si offrir un bijou à une femme n’est pas anodin, offrir une bague est particulièrement délicat de par la symbolique de ce bijou. 

[daflh]

Hmm, I don't see a problem there. It seems that you're using relative url for thumbnail somewhere. When I'm on the root page /blog/, the thumbnail is shown because the image is in the /blog/assets/img/. But when I go to page 2 /blog/page/2/, the image url changed to /blog/page/2/assets/img/, which is not there, that's why it isn't shown.

I can't reproduce, so it's really hard to find out where it went wrong. My suggestion is to recreate your blog with fresh vredeburg template, then watch where the problem started.

[daflh]

Or, can you give me another snippet for /src/posts/posts.11tydata.js file, chances are you used a relative url on this line.

[mluce194]

Ok, this is my code for the 11tydata.js file:

module.exports = {
    layout: "post",
    title: "Untitled",
    eleventyComputed: {
        permalink: (data) => `${data.page.fileSlug}/index.html`,
        thumb: (data) => {
            if (data.thumb) {
                if (data.thumb.search(/^https?:\/\//) !== -1) {
                    return data.thumb;
                }
                return `./assets/img/${data.thumb}`;
            } else {
                return false;
            }
        },
    }
}

[daflh]

Exactly what I thought 🤣🤣 One dot at the start changes everything. Just change ./assets/img/${data.thumb} to /assets/img/${data.thumb}, and see if that will work or not.

[mluce194]

Indeed, it works! Thank you very much for spending time to look into it!

[daflh]

No problem!