vue.js - Vue cli 图像不会加载 webpack

Question

我在做什么？

我正在使用 intersection observer 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) 
    }
}

代码图像

文件夹

Answer 1

问题出在您的图片路径上。

1. 您可以使用公用文件夹修复它并在路径中提供它。

2. 您还可以检查输入时出现的自动建议，这可以帮助您检查您的路径是否正确。

Like this