Im following the step by step docs guide to use the plugin and i still cant see it working
VueJs 2x
VueCLI 3.9.3
main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
component
<div v-lazy-container="{ selector: 'img' }">
<img data-src="https://images.pexels.com/photos/1677275/pexels-photo-1677275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1612461/pexels-photo-1612461.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/979003/pexels-photo-979003.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2444444/pexels-photo-2444444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<img data-src="https://images.pexels.com/photos/949380/pexels-photo-949380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1656579/pexels-photo-1656579.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
The objetive is to load images on the viewport but it loads all the photos
the error was that I needed to fix a size to the container so that the library could work, this way the images were not loaded all at the same time. (just add height)
<div v-lazy-container="{ selector: 'img' }" style='height: 500px;'>
<img data-src="https://images.pexels.com/photos/1677275/pexels-photo-1677275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1612461/pexels-photo-1612461.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/979003/pexels-photo-979003.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2444444/pexels-photo-2444444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<img data-src="https://images.pexels.com/photos/949380/pexels-photo-949380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1656579/pexels-photo-1656579.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
Related
I'm getting some data from an API that contains an image and some other information. Now there's a problem in Nuxt js or maybe I'm wrong. Whenever I supply the path to the image in the :src it just doesn't work.
Here's my code:
<div v-for="(project, index) in projects" :key="project.p_id" class="swiper-slide">
<div :id="`index_${index}`" class="slide_wrapper">
<div class="background">
<img :src="getImgUrl(project.p_img_path)" alt="project cover image" />
</div>
<div class="details">
<div>
<div class="left">
<h2 style="color: black !impor tant">{{ project.p_label }}</h2>
<small>{{ project.p_date }}</small>
</div>
<div class="right">
<nuxt-link class="btn btn-secondary" to="/" #click="readMore">
<i class="fas fa-ellipsis-h"></i>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
script:
props: ['projects'],
methods: {
readMore() {},
getImgUrl(path) {
return '../../../' + path
},
},
Last thing, whenever I use required required('./assets/'+image.jpg') nuxt.js crushes in compilation always stops at 69%. I also tried required.context but it didn't work as well.
Any help will be appreciated. Thanks in advance.
In your template, change:
<img :src="getImgUrl(project.p_img_path)" alt="project cover image">
To:
<img :src="require(`../assets/${project.p_img_path}`)" alt="project cover image">
You shouldn’t need a method to return the path as a string, just use a template literal as above.
Ps. This assumes project.p_img_path = img/project_img/filename.jpg, so adjust as necessary.
The solution is that I had to put all the images inside the assets folder directly. Thank you all for your time.
Trying to add hover effect for the div contain the img with the class: materialboxed
unfortunately, it is not working together.
Any ideas?
< https://codepen.io/taldevlop/pen/WNvGWqQ?
<div class="masonry tiles">
<div class="col s4 tile gallery item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
<div class="details">
<span class="title">Title</span>
<span class="description">Description</span>
</div>
</div>
</div>
Ok, several things wrong here:
1) You haven't included jQuery, but you're trying to initialise materialbox with jQuery. So either include jQuery in your project/pen, or use the vanilla JS initialisation as per the documentation.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.materialboxed').materialbox();
});
Here is a codepen using jQuery and fixed up a little.
https://codepen.io/doughballs/pen/zYGowBp
2) If you look at your code, you've got a random image right at the bottom before your scripts:
<div class="masonry tiles">
<div class="col s4 tile gallery item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
<div class="details">
<span class="title">Title</span>
<span class="description">Description</span>
</div>
</div>
</div>
<!-- What is this image? -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
3) I took off .responsive-img and instead set .materialboxed to be width: 100%
.materialboxed {
width:100%;
}
I'm not really sure what you're trying to achieve. Hope this helps in some way.
Vue-Owl-Carousel workign fine using the basic model :
<carousel>
<img src="https://placeimg.com/200/200/any?1">
<img src="https://placeimg.com/200/200/any?2">
<img src="https://placeimg.com/200/200/any?3">
<img src="https://placeimg.com/200/200/any?4">
</carousel>
But when i use a loop on , the Carousel broke and shows all slides in column.
<carousel> // Not Working
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
<carousel> // Not Working
<template v-for="slide in slides"><img :src="getslide(slide)"></template>
</carousel>
<carousel> // Not Working, the error is with v-for..
<img v-for="slide in slides" src="/slide.png">
</carousel>
Thank you if you can help.
You can try:
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
Are you using axios to get data to the slides array from the database?. If so the template of vue is being rendered before the data is received in the array causing the carousel not to work. you can re render the vue component and it will work. I had same problem and re-rendering the vue solved it.
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
code worked for me :)
I had the same problem, just check if your slides data is true
try this code :
<carousel v-if="slides">
<img v-for="slide in slides" :src="slide.png">
</carousel>
Im using bulma css as the framework.
I have made a custom box component with two props. One for the title and one for the image src.
However when i use this component in another component and enter the src, it doesnt run through the file loader and hash the output. It just makes a path with what i have exactly entered.
BaseBox.vue:
<template>
<div class="column">
<div class="box image is-2by1 is-marginless">
<div class="is-pos-absolute is-centered-absolute">
<h1 class="title has-text-white has-text-weight-bold is-size-4-mobile">{{title}}</h1>
<div class="buttons is-centered">
<a class="button button-dark has-text-weight-semibold">MORE</a>
</div>
</div>
<img v-bind:src="imageSrc" alt="">
</div>
</div>
</template>
<script>
export default{
props:{
title: String,
imageSrc: String
}
}
</script>
use in component
<BaseBox title="Our Products" imageSrc="~/assets/image.jpg"></BaseBox>
any help would be much appreciated
I am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">