vue.js - Vue cli 图像无法使用 webpack 加载

问题描述

我在做什么？

我正在使用交叉点观察者 API 进行延迟加载。

我尝试了什么？

我在一个简单的 HTML 页面中尝试了代码，它运行良好，但是当我在 vue 中使用代码时，图像不会加载（本地图像）。如果我放一个 Http 源图像（在线图像），它也很完美。我认为这是一个 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>

指示

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

代码图像

文件夹

标签： vue.jswebpack