Vue CLI图像不会通过Webpack加载

Question

Vue CLI图像不会通过Webpack加载

我在做什么？

我正在使用相交观察器API进行延迟加载。

我尝试了什么？

我在一个简单的HTML页面中尝试了该代码，并且效果很好，但是当我在vue中使用该代码时，图像将不会加载（本地图像）。如果我放一个htttp源图像（在线图像），它也可以完美工作。我认为这是一个webpack错误配置。我对吗？我该如何解决？

有什么错误？

当我使用本地图像时，代码不起作用，如果仅使用该图像来更改该src，例如此图像https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg？ auto = compress＆cs = tinysrgb＆dpr = 2＆h = 650＆w = 940代码有效，为什么我不能使它与本地图像一起使用？

HTML和脚本

<template>
    <div class="container" id="section3">
        <span class="containerTitle">Galeria</span>
        <div class="wrapper">
            <img v-lazyload data-src="@assets/images/001.jpg" class="card">
        </div>
    </div>
</template>
<script>
import lazyload from '../directives/lazyload'
export default {
    directives:{
      lazyload
    },   
}
</script>

Run Code Online (Sandbox Code Playgroud)

指示

export default{
    inserted: el =>{
        const options = {
            // root:
            rootMargin: '0px 0px 0px 0px',
            threshold:1
        }
        var observer = new IntersectionObserver((entries,observer) =>{
            entries.forEach(entry => {
                if(entry.isIntersecting){
                    el.src = el.dataset.src
                    observer.unobserve(el)
                    console.log('intersecting');

                }
            })
            },options) 
            observer.observe(el) 
    }
}

Run Code Online (Sandbox Code Playgroud)

代码图像