Vue Image Embedding Fails in .vue Files with @parcel/[email protected]

[TobiasSchikora]

🐛 bug report

When using @parcel/transformer-vue in versions later than 2.13.3, images referenced in .vue files are rendered as [object Object] in the HTML output. This issue does not occur when images are loaded outside Vue (e.g., directly in index.html).

Steps to Reproduce

• Use @parcel/transformer-vue v2.14.0 or higher.
• Reference an image asset in a .vue file (e.g., <img src="./image.png">).
• Build the project.

Workaround

Pin dependencies to v2.13.3.

🎛 Configuration

{
  "parcel": "2.14.3",
  "@parcel/transformer-vue": "2.14.3",
  "@parcel/resolver-glob": "2.14.3"
}

🤔 Expected Behavior

Image paths are correctly resolved and rendered in the HTML.

😯 Current Behavior

[object Object] is output instead of the image path.

🔦 Context

May be related to changes in asset handling or serialization in newer versions of the Vue transformer.

[shepmaster]

This may be beyond Vue — I have a React setup and am seeing something similar:

import image from "./assets/test-pattern.jpg";
console.log(image)
import * as styles from "./TestPattern.module.css";

const TestPattern: React.FC = () => (
  <img className={styles.container} src={image} />
);

export default TestPattern;

This logs image as the empty object {} and the HTML contains [object Object]:

<img class="ySmK_a_container e4Rufq_-expand" src="[object Object]">

This code has been working fine for years, so it certainly feels like some recent change somewhere.

[shepmaster]

Ah, I found #10116 (comment) (where this issue came from!), which suggests changing the import to use url: in import statements. Sorry for the noise.

[TobiasSchikora]

To avoid any misunderstandings: I'm not talking about imported image files that I then reference in the templates, but rather image URLs that I specify directly in the templates - without any imports.

For example, if I have something like this in a .vue file:

<img src="../img/test.png">

Previously, the image would load correctly, but now it just shows [object Object].

Importing works fine if I prepend url:, but I don’t want to have to import every single image reference in my vue components, especially since it used to work without imports. Something must have broken here.

[TobiasSchikora]

Any updates on this?