Skip to content

'src' of img tag become src="[object Module]" in browser #1612

Open
@zhangwang945

Description

@zhangwang945

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

haoqunjiang commented on Nov 28, 2019

@haoqunjiang
Member

Workaround: set the esModule option in url-loader to false.

It's because in @vue/component-compiler-utils we transformed the asset urls to require statements, which expect CommonJS modules, while the recent major release of url-loader emits ES modules by default.

zhangwang945

zhangwang945 commented on Nov 28, 2019

@zhangwang945
Author

Oh...! I see. I'm careless!

amitsaxena

amitsaxena commented on Apr 12, 2020

@amitsaxena

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 as src="[object Module]".

Moongazer

Moongazer commented on Apr 12, 2020

@Moongazer

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).

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

itsmepetrov commented on Apr 16, 2020

@itsmepetrov

If you use file-loader, upgrade it to 6.0.0 version and specify esModule: false in options:

{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[contenthash].[ext]',
        outputPath: 'static/img',
        esModule: false // <- here
      }
    }
  ]
}
phlegx

phlegx commented on Apr 16, 2020

@phlegx

For Rails with Vue developer

@rails/webpacker: 5.0.1

Add the following line in file config/webpack/environment.js:

/* Fix a bug for file inclusion like <img :src="require()"/> */
environment.loaders.get('file').use.find(item => item.loader === 'file-loader').options.esModule = false

before

module.exports = environment
carlos-avila

carlos-avila commented on Apr 24, 2020

@carlos-avila

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

ederuiter commented on May 4, 2020

@ederuiter

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

aqeebimtiaz commented on Jul 16, 2020

@aqeebimtiaz

If you use file-loader, upgrade it to 6.0.0 version and specify esModule: false in options:

{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[contenthash].[ext]',
        outputPath: 'static/img',
        esModule: false // <- here
      }
    }
  ]
}

weirdly enough, this simple fix helped on my React project too lol!

kinoli

kinoli commented on Oct 20, 2020

@kinoli

After installing Storybook in my vue app, this same error came up. My fix within chainWebpack inside vue.config.js was to add this.

config.module
      .rule('svg')
      .use('file-loader')
      .loader('file-loader')
      .tap(options => Object.assign(options, { esModule: false }));
phlegx

phlegx commented on Oct 21, 2020

@phlegx

You can also add this to your Vue config:

/* vue.config.js */

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        const transformAssetUrls = options.transformAssetUrls || {}
        return {
          ...options,
          transformAssetUrls: {
            video: ['src', 'poster'],
            source: 'src',
            img: 'src',
            image: 'xlink:href',
            // Add any other pre defined custom asset items
            ...transformAssetUrls,
          },
        }
      })
    // ...
  }
}  
icleolion

icleolion commented on Oct 27, 2020

@icleolion

Is this a non-issue in Vue 3?

shirhen

shirhen commented on Apr 12, 2021

@shirhen

Is there any update on this bug? that is not a workaround 🤔

Airkro

Airkro commented on Jul 22, 2021

@Airkro

I create #1824 to fix it but need help for test suit compact.

@sodatea

staticish

staticish commented on Jul 14, 2022

@staticish

i need help with this using React

luishnzg

luishnzg commented on May 23, 2023

@luishnzg

hi, you can import it and add ".src" at the end like this:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ondrejbartas@kinoli@amitsaxena@phlegx@itsmepetrov

        Issue actions

          'src' of img tag become src="[object Module]" in browser · Issue #1612 · vuejs/vue-loader