Vue CLI图像不会通过Webpack加载

Question

我在做什么？

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

我尝试了什么？

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

怎么了？

当我使用本地图像时，代码无法正常工作，如果仅使用该图像https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940之类的代码来更改该src，为什么我无法使其与本地图像一起工作？

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

Answer 2

我不记得为什么会这样，但是您需要使用以下语法：

<img v-lazyload data-src="~assets/images/001.jpg" class="card">

，用~代替../。

如果我弄清楚原因，我将更新答案。

Answer 3

您的路径错误。您给了../assets/images/001.jpg作为映像的路径（如您的问题所述），但是根据目录树，它是../assets/001.jpg（或写成@/assets/001.jpg，@点到项目的根目录）。那应该解决它。

Answer 4

据我所知，您不能在@内使用<template>签名。 因此，您可以：

需要

<img v-lazyload :data-src="require('@assets/images/001.jpg')" class="card">

导入

<template>
...
<img v-lazyload data-src="image" class="card">
...
</template>
<script>
import img from '@assets/images/001.jpg';
...
data() {
  return {
    image: img,
  }
}
...
</script>

使用相对路径

<img v-lazyload data-src="../assets/images/001.jpg" class="card">

您可以在Vue docs中查看它的工作方式

Answer 5

进行了大量研究，发现这篇文章涉及vuejs和静态资产。

https://edicasoft.com/weblog/2018/04/27/static-vs-srcassets-webpack-template-vue-cli/

他们说，这类问题是“像我一样”因为webpack发生的，因此解决方案（我希望不是唯一的解决方案），但这是到目前为止的解决方案...

QUOTE

Webpack将所有资产URL（例如，background：url（...）和CSS @import）解析为模块依赖项，例如require（'./ logo.png'）。

然后，我们使用Webpack加载程序（例如文件加载程序和url加载程序）对其进行处理。 Webpack模板已经配置了这些加载器。

文件加载器有助于确定最终文件位置以及如何使用版本哈希来命名文件，以实现更好的缓存。因此，您可以将静态资产放在.vue文件附近，并使用相对路径。无需将它们严格地放入“资产”文件夹中。

URL加载程序有助于有条件地内联资产，例如base64数据URL，从而减少HTTP请求的数量。

那我该怎么办？

答案是：将您的资产放在“ src”文件夹中。

我对此进行了测试，并且但是您不能制作一个子文件夹，对我来说这是混乱的。

这是使用交点观察器api作为vue 指令完成此操作的最终文件夹结构！