Open
Description
Version
15.7.2
Reproduction link
https://github.com/zhangwang945/vue-test.git
Steps to reproduce
webpack 4.41, url-loader 3.0.0 .
Clone code https://github.com/zhangwang945/vue-test.git. Then npm run start.
img src="./assets/jinnang.png" become img src="[object Module]"
What is expected?
src="base64 image"
What is actually happening?
src="[object Module]"
Img tag in template will be compiled into: {attrs:{"src":webpack_require(/*! ./assets/jinnang.png */ "./src/assets/jinnang.png"),"alt":""}}
The reult of webpack_require(....) is Object Module ,so it go wrong. Is it right?
Url in css will be compiled into getUrl(webpack_require(/*! ./assets/jinnang.png */ "./src/assets/jinnang.png"),that go well.
Activity
haoqunjiang commentedon Nov 28, 2019
Workaround: set the
esModule
option inurl-loader
tofalse
.It's because in
@vue/component-compiler-utils
we transformed the asset urls torequire
statements, which expect CommonJS modules, while the recent major release ofurl-loader
emits ES modules by default.zhangwang945 commentedon Nov 28, 2019
Oh...! I see. I'm careless!
amitsaxena commentedon Apr 12, 2020
Was this issue fixed and released? I seem to have run into a similar scenario when using rails (
v6.0.2.2
) with webpacker (5.0.1
) and vue-loader (v15.9.1
). Existing images which were previously rendered fine now show source assrc="[object Module]"
.Moongazer commentedon Apr 12, 2020
Same for me, I've just started a project and v15.9.1 was loaded from repro. My image sources showing
src="[object Module]"
itsmepetrov commentedon Apr 16, 2020
If you use
file-loader
, upgrade it to6.0.0
version and specifyesModule: false
inoptions
:phlegx commentedon Apr 16, 2020
For Rails with Vue developer
@rails/webpacker: 5.0.1
Add the following line in file
config/webpack/environment.js
:before
carlos-avila commentedon Apr 24, 2020
This issue is also present in Nuxt 2.12.0
You can still access the string value through the 'default' property:
require('@/assets/images/logo-1.png').default
ederuiter commentedon May 4, 2020
Downgrading to file-loader to ^2.0.0 (which is the version laravel mix depends on) seems to "fix"/prevent the problem as well.
7 remaining items
aqeebimtiaz commentedon Jul 16, 2020
weirdly enough, this simple fix helped on my React project too lol!
kinoli commentedon Oct 20, 2020
After installing Storybook in my vue app, this same error came up. My fix within chainWebpack inside vue.config.js was to add this.
phlegx commentedon Oct 21, 2020
You can also add this to your Vue config:
icleolion commentedon Oct 27, 2020
Is this a non-issue in Vue 3?
shirhen commentedon Apr 12, 2021
Is there any update on this bug? that is not a workaround 🤔
Airkro commentedon Jul 22, 2021
I create #1824 to fix it but need help for test suit compact.
@sodatea
staticish commentedon Jul 14, 2022
i need help with this using React
luishnzg commentedon May 23, 2023
hi, you can import it and add ".src" at the end like this:
