Vue cli 图像不会使用 webpack 加载答案

【问题标题】：Vue cli image wont load with webpackVue cli 图像不会使用 webpack 加载
【发布时间】：2020-01-11 17:37:24
【问题描述】：

我在做什么？

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

我尝试了什么？

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

什么错误？

当我使用本地图像时，代码不起作用，如果只用类似此图像https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 代码 WORKS 的其他东西更改该 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) 
    }
}

代码图像

文件夹

【问题讨论】：

请将代码作为文本而不是图像包含
我的错，更新@Phil
最简单的方法是将图像放在public 文件夹中（可能在子文件夹中），然后在data-src 属性中使用绝对URL。阅读手册 - cli.vuejs.org/guide/…
我在 /assets 文件夹 @IVOGELOV 中拥有所有图像
好吧，也许这篇博文会对你有所帮助 - markus.oberlehner.net/blog/…

标签： vue.js webpack

【解决方案1】：

问题在于您的图像路径。

您可以使用公用文件夹修复它并在路径中提供它。
您还可以检查输入时出现的自动建议，这可以帮助您检查您的路径是否正确。

Like this

【讨论】：

嗨！ 1.资产也是公用文件夹，顺便说一下我把图像放在/public中进行测试，也不起作用
试试这个语法：- ` `
嗨，如果尝试该语法，lazyload.js 将不起作用，正如您所见，我使用 dara-src 中的路径并复制到 src
我猜您的 data-src 不接受该文件。很难说是什么原因造成的。也许这个页面可以帮助你：- link

【解决方案2】：

你的路径是错误的。您将../assets/images/001.jpg 作为图像的路径（如您的问题中所述），但根据您的目录树，它是../assets/001.jpg（或将其写为@/assets/001.jpg，@ 指向项目的根目录）。那应该可以解决它。

【讨论】：

嗨@bram 我更新了帖子图片和代码，不，它不是路径。顺便说一句，我按照您所说的进行了测试，并且遇到了相同的“错误”，我也使用 http 图像进行了测试，并且可以正常工作！
请在您的问题中说明您的“错误”。更多信息意味着有人更容易为您提供答案。
我刚刚更新了帖子，谢谢@Bram，我认为这是一个 webpack 错误，因为如果使用没有 vue 的简单 js 它可以工作
@AlexHunter 控制台打印任何错误吗？喜欢resource not found 还是微笑？。
不，它只是不显示，但如果我更改为互联网上的图像，完美@Bram

【解决方案3】：

据我所知，您不能在 <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查看它是如何工作的

【讨论】：

嗨@Qback 我使用相对路径，这就是为什么我有这个错误（我认为）因为如果我使用这个图像images.pexels.com/photos/69817/… 代码完美地工作
我的意思是，也许可以尝试使用require 语法，如<img v-lazyload :data-src="require('@assets/images/001.jpg')" class="card">

【解决方案4】：

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

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

用~ 替换../。

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

【讨论】：

嗨，我更新了帖子图片和代码，不，它不是路径。顺便说一句，我按照您所说的进行了测试，并且遇到了相同的“错误”，我也使用 http 图像进行了测试，并且可以正常工作！

【解决方案5】：

通过广泛的研究，我发现了这篇关于 vuejs 和静态资产的文章。

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

他们说这种问题的发生是“因为”webpack，就像我一样，所以解决方案（我希望不是唯一的解决方案），但这是迄今为止的解决方案......

报价

所有的资源 URL，比如 background: url(...) 和 CSS @import 都被 Webpack 解析为模块依赖，比如 require('./logo.png')。

然后我们使用用于 Webpack 的加载器（例如 file-loader 和 url-loader）来处理它们。 Webpack 模板已经配置了这些加载器。

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

Url-loader 有助于有条件地内联资产，例如 base64 数据 URL，减少 HTTP 请求的数量。

那我该怎么办呢？

答案是：将你的资产放在‘src’文件夹中。

我对此进行了测试，它运行良好但你不能创建一个子文件夹，这对我来说是杂乱无章的。

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

【讨论】：