Image object has unexpected behaviour when using it in an img tag with :src

[miguelliar]

Link to minimal reproduction

miguelliar/imdb_academy@8618795

Steps to reproduce

1- Import * as imageToDisplay from "@/assets/image.jpg";
2- create in data an attribute to show the image:
data() { return { imageObject: imageToDisplay, }; },
3- Use the imageObject in :src in order to get the unhandled error:
<img :src="movieCover">

What is expected?

It should display the image in the webpage

What is actually happening?

An unhandled error appears and a new exception appears too.

System Info

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <ImageFrame movie= {id: 'tt0000001', source: {…}, additionalInformation: {…}}additionalInformation: {Plot: 'Performing on what looks like a small wooden stage…ith kicks and twirls, a smile always on her face.', Poster: 'https://m.media-amazon.com/images/M/MV5BZmUzOWFiND…zg1ZjFmXkEyXkFqcGdeQXVyNDE5MTU2MDE@._V1_SX300.jpg'}id: "tt0000001"source: {titleType: 'short', primaryTitle: 'Carmencita', originalTitle: 'Carmencita', isAdult: false, startYear: 1894, …}[[Prototype]]: Object > 
  
at <MovieItem key="Carmencita" movie= {id: 'tt0000001', source: {…}, additionalInformation: {…}} > 
  at <MovieList> 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {searchFrontPage: ƒ, searchedFilms: ƒ, …} > > 
  at <RouterView> 
  at <App>

runtime-dom.esm-bundler.js?2725:281 Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at patchDOMProp (runtime-dom.esm-bundler.js?2725:281:1)
    at patchProp (runtime-dom.esm-bundler.js?2725:409:1)
    at mountElement (runtime-core.esm-bundler.js?d2dd:4632:1)
    at processElement (runtime-core.esm-bundler.js?d2dd:4595:1)
    at patch (runtime-core.esm-bundler.js?d2dd:4515:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:4714:1)
    at mountElement (runtime-core.esm-bundler.js?d2dd:4623:1)
    at processElement (runtime-core.esm-bundler.js?d2dd:4595:1)
    at patch (runtime-core.esm-bundler.js?d2dd:4515:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5066:1)

Any additional comments?

I got this error when I was trying to do a ternary operator and show certain image obtained with a link when a condition happened and if not show a project asset. However, when the project assets had to show, it threw me that error. Later, when I tried to just use the asset just by itself the unhandled error appeared

[miguelliar]

It appears that the problem occurs when using
Import * as imageToDisplay
instead of
Import imageToDisplay

[liulinboyi]

Use the import * as imageToDisplay from 'image.jpg'

The img path is in default property.

You can use like this:

import { default as imageToDisplay} from 'image.jpg'

[miguelliar]

Oh, nice to know!
Thank you very much 😊