CODEWITHSUNDEEP
vue.jswebpack
Alex Hunter
Alex Hunter

Reputation: 260

Vue cli image wont load with webpack

What am I doing?

I am using the intersection observer API to make lazy loading.

What have I tried?

I tried the code in a simple HTML page and it works perfect, but when I use the code in vue, the images won't load (local images). If I put a htttp source images (online images) it works perfect, too. I think this is a webpack error config. Am I right? How can I fix it?.

Whats the error?

When i use a local image the code doesnt work, if only change that src with something else like this image https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 the code WORKS, why i cant make it work with local images?

HTML AND SCRIPT

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

DIRECTIVE

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

CODE IMAGE

enter image description here

FOLDER

enter image description here

Upvotes: 5

Views: 3930

Answers (5)

Alex Hunter
Alex Hunter

Reputation: 260

doing extensive research i found this article about vuejs and static assets.

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

They said that this kind of problems occurs "because" of webpack,like i though, so the solution for this (i hope not the only solution), but this is the solution so far...

QUOTE

All asset URLs such as , background: url(...) and CSS @import are resolved by Webpack as module dependencies like require('./logo.png').

We then use loaders for Webpack, such as file-loader and url-loader, to process them. Webpack template has already configured these loaders.

File-loader helps to determine the final file location and how to name it using version hashes for better caching. Thus you can put your static assets near your .vue files and use relative paths. There is no need to put them strictly into the ‘assets’ folder.

Url-loader helps to conditionally inline assets such as base64 data URL, reducing the amount of HTTP requests.

So what the hell should I do with it?

The answer is: put your assets in the ‘src’ folder.

I tested this and it works perfect BUT you CANT make a subfolder and this for me, is disorganized.

This is the final folder structure to get this done using intersection observer api as vue directive!

enter image description here

Upvotes: -2

Qback
Qback

Reputation: 4908

As far as I remember you can't use @ sign inside <template>. So you can either:

require it

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

import it

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

use relative path

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

You can check how it works in Vue docs

Upvotes: 2

Condor
Condor

Reputation: 199

Your path is wrong. You gave ../assets/images/001.jpg as the path to the image (as stated in your question), but according to your directory tree it's ../assets/001.jpg (or write it like @/assets/001.jpg, @ points to root of project). That should fix it.

Upvotes: 2

Rashad Saleh
Rashad Saleh

Reputation: 2847

I can't remember why this works, but you need to use the following syntax:

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

with the ~ replacing the ../.

I will update the answer if I figure out exactly why.

Upvotes: 1

rushabh sojitra
rushabh sojitra

Reputation: 152

The issue is with your image path.

  1. You can fix it with either using public folder and give it in path.

  2. You can also check for auto suggestion which come up while typing, this may help you to check whether your path is correct or not.

Like this

Upvotes: 2

Related Questions