i18n: multiple-folders create invalid image references

Describe the bug when using:

i18n:
  structure: multiple_files
  locales: [ de, en]

- name: "portraits"
    folder: "src/pages/portraits"
    media_folder: ''
    public_folder: ''
    path: '{{slug}}/index'
    i18n: true
    fields:
      - {label: "title", name: "title", i18n: duplicate, widget: "string"}
      - {label: "Profile Picture", name: "profilepicture", widget: image, i18n: duplicate}

A new (localized) item in a collection with an image widget results in the following folder structure:

/src/pages/portraits/de/lord-voldemort/index.md /src/pages/portraits/en/lord-voldemort/index.md /src/pages/portraits/lord-voldemort/image.jpg

both of the mardown files look something like that (after creating a new item in the UI and uploading an image as profilepicture)

---
title: Lord Voldemort
profilepicture: image.jpg
---
## Some markdown

My problem is the invalid reference of the profile picture, because this markdown and the described folder structure breaks the Gatsby GraphQL because now the profilepicture is not a "image" object node in the graph but some string. If i change profilepicture to "../../lord-voldemort/image.jpg" in the MD file and restart gatsby, everything is ok again.

To Reproduce

Create a Collection like described and create an entry via CMS UI.

Expected behavior

profilepicture with a proper reference to the image file like so:

---
title: Lord Voldemort
profilepicture: ../../lord-voldemort/image.jpg
---
## Some markdown

Screenshots

Applicable Versions: "gatsby-plugin-netlify-cms": "^4.7.0", "netlify-cms-app": "^2.14.8",

Git provider: GitHub

CMS configuration as seen above.

decaporg / decap-cms

i18n: multiple-folders create invalid image references #4781