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.