Element: [Bug Report] el-image can not load image in Vue template file

[pape2016]

Element UI version

2.8.2

OS/Browsers version

windows 10/firefox 66.0.4

Vue version

2.6.10

Reproduction Link

https://codepen.io/pen

Steps to reproduce

I'm sorry that because the issue is happened after webpack processed the vue single file template, so I can not provide the reproduction link in codepen, sorry for that.
I will describe the issue as clear as I can.

1. I use url-loader to process image file and set the option limit, the image file size is less than the limit size. so it will be packed into js file.

{
    test: /\.(png|jpg|gif)$/i,
    use: [
        {
            loader: 'url-loader',
            options:
            {
                limit: 102400,
                name: 'images/[name].[ext]'
            }
        },
    ]
},

1. before, I used html img element to show the image, it works.
   image.vue:

<img src="../images/1.jpg>

image file size is 53.1KB, it is packaged into js file.
after I upgrade element-ui to 2.8.0, I use el-image to show the image instead of using img:

<el-image src="../images/1.jpg" fit="fill"></el-image>

the image is not shown and show the error: 加载失败

1. I manually create a folder images in folder dist(which is the wepack output folder) , and then copy the image file 1.jpg into folder images, then the image shows in the page after I refresh the page.

the el-image component can not show the image which is packed into the js file.

What is Expected?

the image which is packed in to js file by webpack can be shown in the page.

What is actually happening?

the image packed into js file by webpack can not be loaded currently in the page and show error: 加载失败.

[element-bot]

Translation of this issue:

Element UI version

2.8.2

OS/Browsers version

Windows 10/firefox 66.0.4

Vue version

2.6.10

Reproduction Link

Https://codepen.io/pen

Steps to reproduce

I'm sorry that because the issue is happened after webpack processed the Vue single file template, so I can not provide the reproduction link in codepen, sorry for that.

I will describe the issue as clear as I can.

1. I use url-loader to process image file and set the option limit, the image file size is less than the limit size. So it will be packed into JS file.

{

Test: /. (png | jpg | gif) $/i,
Use: [

{
Loader:'url-loader',

Options:
{

Limit: 102400,
Name:'images/[name]. [ext]'

}
}

]
}

1. Before, I used HTML img element to show the image, it works.

Image.vue:

The image is not shown and show the error: Load failure

1. I manually create a folder images in folder dist (which is the wepack output folder), and then copy the image file 1.jpg into folder images, then the image shows in the page after I refresh the page.
   The el-image component can not show the image which is packed into the JS file.

What is Expected?

The image which is packed in to JS file by webpack can be shown in the page.

What is actually happening?

The image packed into JS file by webpack can not be loaded currently in the page and show error: loading failed.

[pape2016]

please ignore the 2nd comment.

[SimonaliaChen]

You should load the image asset by require or import in js and pass the resource to el-image, for example:

  <template>
     <el-image :src="asset"></el-image>
   </template>
   <script>
     const asset = require('from/path/to/xx.png')
     export default {
       data() {
         return {
           asset
         }
       }
    }
   </script>

[pape2016]

Thanks for your suggestions, get your code and It works now.

Is it possible to make it usable just give the src path like the normal image file? the html element <img src="path" /> works well.
if we need to show lots of images what are dynamically fetched, we don't know what images are packed and what imags are not. also, it's not be able to import because we don't know the image name.

we can solve it by a complex solution, Could you think about if we can achive in a simple and graceful way.
Thanks.

[Azleal]

I'm encountering the same problem. Now I'm using the <img src="path" />. Is there an easier way to achieve this?

[tallcoder]

I had this issue, but for me, removing the "lazy loading" is what fixed it for me. I just wanted to report that in case it helps someone.