Develop Reference

img src not working in Vue js and must have a correct path?

image src not working.
can anybody help me?
<div v-for="(item, index) in businessItems" :key="index" class="business-item">
<div class="item-wrap">
<div class="wishlist">
<i class="icon-wishlist-line"></i>
<i class="icon-wishlist d-none"></i>
</div>
<div class="image">
<img :src="require(`#/assets/images/business/${item.img_url}`)">
</div>
<h2 class="title">{{item.title}}</h2>
<StarRating :rate="item.rate" />
</div>
</div>
img src is bind with require from node.js but unfortunately is not working

How about use public path or path, I mean remove require
<img :src=`/assets/images/business/${item.img_url}`/>
And way i see it you can assert / for end tag

This code has not been tested but I'm sure it should do the trick. The most important is the getImg method which allows you to access require() and get the image path.
<template>
<div>
<div v-for="(item, index) in businessItems" :key="index" class="business-item">
<div class="item-wrap">
<div class="wishlist">
<i class="icon-wishlist-line"></i>
<i class="icon-wishlist d-none"></i>
</div>
<div class="image">
<img :src="getImg(item.img_url)">
</div>
<h2 class="title">{{item.title}}</h2>
<StarRating :rate="item.rate" />
</div>
</div>
</div>
</template>
<script>
import businessItems from '#/services/business';
export default {
data() {
return {
businessItems,
}
},
methods: {
getImg(url) {
return require(`#/assets/images/business/${url}`);
}
}
}
</script>
<style>
</style>

Filter divs by class

I am trying to create a function that returns an additional display of none when you click on a button. It basically filters divs with class names when you click a button. I used a while/do loop to go through all the elements by class name.
In the browser console log it is telling me
"Cannot read property 'style' of undefined".
Does anybody knows what might be the problem?
<div class="container">
<h1 id="title">World's Top suppply chains</h1>
<div class="options">
<button id="allbtn">All</button>
<button>Drinks</button>
<button>Clothing</button>
<button>Cars</button>
<button id="fast-food-btn">Fast Food</button>
</div>
<div class="stores">
<div class="store">
<img src="images/adidas.png">
<h3>Adidas</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/corona.png">
<h3>Corona</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/nike.jpg">
<h3>Nike</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/lambo.png">
<h3>Lamborghini</h3>
<p class="industry">Cars</p>
</div>
<div class="store">
<img src="images/smirnoff.png">
<h3>Smirnoff</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/pepsi.jpg">
<h3>Pepsi</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/gucci.png">
<h3>Gucci</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/heineken.jpg">
<h3>Heineken</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/lacoste.png">
<h3>Lacoste</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/ferrari.png">
<h3>Ferrari</h3>
<p class="industry">Cars</p>
</div>
<div class="store">
<img src="images/pizzahut.png">
<h3>Pizza Hut</h3>
<p class="industry">Fast Food</p>
</div>
<div class="store">
<img src="images/cocacola.png">
<h3>Coca Cola</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/mc.png">
<h3>Mc Donalds</h3>
<p class="industry">Fast Food</p>
</div>
</div>
</div>
<script>
const industry = document.getElementsByClassName(".industry");
const fastFood = document.getElementById("fast-food-btn");
allbtn.addEventListener("click", filter);
function filter(){
const card = industry.parentElement;
do{
card.style.display = "none";
}
while(industry.innerHTML === "Fast Food");
}
</script>

First issue is that you don't need the dot in front of the class when using getElementsByClassName.
Secondly getElementsByClassName returns a HTMLCollection which does not have a property called parent.
Which results in something like this:
function filter() {
const industries = document.getElementsByClassName("industry");
for (let industry of industries) {
industry.style.display = "none";
}
}
Furthermore, it looks like the variable fastFood is not used and the variable allbtn is undefined. I assume it shoul be something like this:
const allbtn = document.getElementById("allbtn");
Putting it together, this should solve your problem:
<script>
function filter() {
const industries = document.getElementsByClassName("industry");
for (let industry of industries) {
industry.style.display = "none";
}
}
const allbtn = document.getElementById("allbtn");
allbtn.addEventListener("click", filter);
</script>

How to set [disabled] attr when reaching horizontal scroll end? (Tiny-Slider)

I'm using Tiny-Slider 2 and stumbled upon this bug: the next button does not get the [disabled] attribute when the last slide is displayed. Here's the Codepen. To reproduce the problem, click on the next button until the slider stops moving the slides, and you will see that the next button does not have the [disabled] attribute. The next button will get the [disabled] attribute only after a few more clicks.

Tiny-slider version: 2.9.1
Create your own buttons (arrows) prev and next, assign them identifiers, the code based on the width of the container and the width of the blocks will set the parameter disabled = true|false.
Example https://codepen.io/cvaize/pen/zYYVRGo
const prev = document.getElementById('road-map-prev')
const next = document.getElementById('road-map-next')
const roadMap = tns({
container: "#road-map",
gutter: 43,
autoWidth: true,
mouseDrag: false,
loop: false,
nav: false
});
prev.addEventListener('click', () => {
if(!prev.disabled){
roadMap.goTo('prev')
}
})
next.addEventListener('click', () => {
if(!next.disabled){
roadMap.goTo('next')
}
})
roadMap.events.on('indexChanged', (v) => {
const item = document.querySelectorAll('#road-map .tns-item')
const roadMapIW = document.getElementById('road-map-iw')
let index = v.displayIndex - 1
let fullWidth = 0
let offsetWidth = 0
item.forEach((value, index2) => {
fullWidth += value.offsetWidth
if(index2 < index){
offsetWidth = fullWidth
}
})
prev.disabled = (index === 0)
next.disabled = (fullWidth - offsetWidth < roadMapIW.offsetWidth)
});
.tns-controls{
display: none;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
</head>
<body>
<div id="app">
<div class="road-map overflow-hidden">
<div class="container">
<h2>Road map SO</h2>
<div class="road-map-controls" aria-label="Carousel Navigation" tabindex="0">
<button id="road-map-prev" data-controls="prev" tabindex="-1" aria-controls="road-map" disabled>prev</button>
<button id="road-map-next" data-controls="next" tabindex="-1" aria-controls="road-map">next</button>
</div>
<div id="road-map">
<div>
<div class="text-primary">1 ноября</div>
Формирование идеи, <br />исследование рынка
</div>
<div>
<div class="text-primary">1 декабря</div>
Создание команды
</div>
<div>
<div class="text-primary">1 января</div>
Презентация проекта <br />на тематических <br />сайтах и форумах
</div>
<div>
<div class="text-primary">4 февраля</div>
Начало баунти <br />программы
</div>
<div>
<div class="text-primary">2 марта</div>
Pre-sale
</div>
<div>
<div class="text-primary">1 ноября</div>
Формирование идеи, <br />исследование рынка
</div>
<div>
<div class="text-primary">1 декабря</div>
Создание команды
</div>
<div>
<div class="text-primary">1 января</div>
Презентация проекта <br />на тематических <br />сайтах и форумах
</div>
<div>
<div class="text-primary">4 февраля</div>
Начало баунти <br />программы
</div>
<div>
<div class="text-primary">2 марта</div>
Pre-sale
</div>
<div>
<div class="text-primary">1 ноября</div>
Формирование идеи, <br />исследование рынка
</div>
<div>
<div class="text-primary">1 декабря</div>
Создание команды
</div>
<div>
<div class="text-primary">1 января</div>
Презентация проекта <br />на тематических <br />сайтах и форумах
</div>
<div>
<div class="text-primary">4 февраля</div>
Начало баунти <br />программы
</div>
<div>
<div class="text-primary">2 марта</div>
Pre-sale
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Why are all of my file paths broken with innerHTML?

I'm starting to use innerHTML quite a lot with Javascript.
I've also just started using Parcel Bundler.
My problem is that all of my href links and img src file paths don't seem to be working while using innerHTML.
I should also mention that the img links already in the html file are working fine. and I'm using ./ for the innerHTML assigned to the same html file so I can't see any file path issues. Furthermore, if I copy and paste the innerHTML from the JS file into the HTML file the images work fine so it absolutely can't be a file path issue.
There is a lot of code so I'd rather not flood this questions with lines upon lines however this is what I believe to be the relevant code:
I'm using grid-template-areas and flexbox. 'main' being one of my template-area's.
HTML:
<main>
<div class="list-box">
<div class="nav-panel">
<a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="./img/arrow-left.png" alt="Logout Arrow">
<h2 id="logout-btn">Logout</h2></a>
<a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="./img/user.jpg" alt="User Picture">
<h2>Username</h2></a>
<a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
<img class="nav-pic-r nav-img settings-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
<a class="settings-btn hide-desktop"><img class="nav-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
</div>
<div id="settings"></div>
<div id="user"></div>
<div id="lists"></div>
</div>
</main>
At the top of this JS file you'll notice a module import. This is simply JS data for the website.
JS:
import data from './data.js';
const settingsBtn = document.getElementById('settings-btn'); // nav links
const logoutBtn = document.getElementById('logout-btn');
const userBtn = document.getElementById('user-btn');
const lists = document.getElementById('lists');
const settings = document.getElementById('settings');
const user = document.getElementById('user');
logoutBtn.addEventListener('click', () => { // change to lists page
displayLists();
settingsBtn.style.display = 'flex';
logoutBtn.innerHTML = 'Logout';
userBtn.style.display = 'flex';
settings.innerHTML = '';
user.innerHTML = '';
});
userBtn.addEventListener('click', () => { // change to user page
displayUser();
settingsBtn.style.display = 'flex';
logoutBtn.innerHTML = 'Back';
userBtn.style.display = 'none';
lists.innerHTML = '';
settings.innerHTML = '';
});
settingsBtn.addEventListener('click', () => { // change to settings page
displaySettings();
settingsBtn.style.display = 'none';
logoutBtn.innerHTML = 'Back';
userBtn.style.display = 'flex';
lists.innerHTML = '';
user.innerHTML = '';
});
const displayLists = () => { // lists
lists.innerHTML += `
<div class="category-panel hide-mobile">
<h3>Name:</h3>
<div class="category-sections">
<div class="category-l"><h3>Items:</h3></div>
<div class="category-c"><h3>Reminders:</h3></div>
<div class="category-r"><h3>Created:</h3></div>
</div>
</div>
`;
for (let i = 0; i < data.lists.length; i++) {
let obj = eval(data.lists[i]);
let totalReminders = getTotalReminders(obj);
lists.innerHTML += `
<a href="./list.html">
<div class="list-item">
<p>${obj.name}</p>
<div class="category-sections">
<p class="category-circle-border">${obj.items.length}</p>
<p class="category-circle-border">${totalReminders}</p>
<p class="date-width">${obj.created}</p>
</div>
</div>
</a>
`;
}
};
const getTotalReminders = passed => {
let total = 0;
for (let i = 0; i < passed.items.length; i++) {
total += passed.items[i].reminders;
}
return total;
};
displayLists();
const displaySettings = () => {
settings.innerHTML = `
<div class="row-auto">
<div class="flex-column hover">
<img class="api-img" src="./img/apple.png" alt="Apple Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/windows.png" alt="Windows Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/android.png" alt="Android Logo">
<div class="flex">
<h3>Not Connected</h3>
<div class="circle api-colour-offline"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/google.png" alt="Google Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
</div>
<div class="row-auto-c">
<h3>Background:</h3>
</div>
<div class="flex settings-bg-contain-padding">
<img class="settings-bg-pic hover" src="./img/background-0.jpg" alt="Background 1">
<img class="settings-bg-pic hover" src="./img/background-1.jpg" alt="Background 2">
<img class="settings-bg-pic hover" src="./img/background-2.jpg" alt="Background 3">
<img class="settings-bg-pic hover" src="./img/background-3.jpg" alt="Background 4">
<img class="settings-bg-pic hover" src="./img/background-4.jpg" alt="Background 5">
<img class="settings-bg-pic hover" src="./img/background-5.jpg" alt="Background 6">
<div class="hover">
<img class="settings-bg-pic-upload" src="./img/background-0.jpg" alt="Arrow Up">
<p class="black-text">Upload</p>
</div>
</div>
<div class="row-auto">
<div class="flex-column">
<h3>Background On</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="flex-column">
<h3>Random Slider</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="flex-column">
<h3>24h Time</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
</div>
`;
const getBG = document.getElementsByClassName('settings-bg-pic');
const changeBG = BG => { // settings background change
for (let i = 0; i < BG.length; i++) {
BG[i].addEventListener('click', () => {
document.body.style.backgroundImage = `url(./img/background-${[i]}.jpg)`;
});
}
};
changeBG(getBG);
const slide = document.querySelectorAll('.slider');
const sliders = (slide) => { // sliders
slide.forEach(slider => slider.addEventListener('click', (i) => {
i.currentTarget.querySelector('.slider-circle').classList.toggle('slider-checked');
}));
};
sliders(slide);
}
const displayUser = () => {
user.innerHTML = ``;
}
While running Parcel Bundler if I click on my links it simply reloads the page and all of my img's are broken with the alt showing.

Ok I found the solution. The problem was with Parcel Bundler and how it bundles the img files to the dist folder. It doesn't like simply putting img src file paths in the innerHTML. It wants you to import the img's into the JS its self. Here is my solution:
import arrowUp from '../img/arrow-up.png';
import arrowDown from '../img/arrow-down.png';
import arrowLeft from '../img/arrow-left.png';
import arrowRight from '../img/arrow-right.png';
import user from '../img/user.jpg';
import apiApple from '../img/apple.png';
import apiWindows from '../img/windows.png';
import apiAndroid from '../img/android.png';
import apiGoogle from '../img/google.png';
import plus from '../img/add.png';
import tick from '../img/tick-green.png';
import cog from '../img/cog.png';
import bin from '../img/bin.png';
import doc from '../img/document.png';
import lock from '../img/lock.png';
import png from '../img/save.png';
import BG0 from '../img/background-0.jpg';
import BG1 from '../img/background-1.jpg';
import BG2 from '../img/background-2.jpg';
import BG3 from '../img/background-3.jpg';
import BG4 from '../img/background-4.jpg';
import BG5 from '../img/background-5.jpg';
import fb from '../img/facebook.png';
import insta from '../img/insta.png';
import twitter from '../img/twitter.png';
module.exports = {
arrows: [
arrowUp, arrowDown, arrowLeft, arrowRight,
],
symbols: [
plus, tick, cog, bin, doc, lock, png,
],
user: [
user,
],
bgImg: [
BG0, BG1, BG2, BG3, BG4, BG5,
],
apiImg: [
apiApple, apiWindows, apiAndroid, apiGoogle,
],
footer: [
fb, insta, twitter,
],
}
Main JS:
import img from './images.js';
<div class="flex settings-bg-contain-padding">
<img class="settings-bg-pic hover" src="${img.bgImgs[0]}" alt="Background 1">
<img class="settings-bg-pic hover" src="${img.bgImgs[1]}" alt="Background 2">
<img class="settings-bg-pic hover" src="${img.bgImgs[2]}" alt="Background 3">
<img class="settings-bg-pic hover" src="${img.bgImgs[3]}" alt="Background 4">
<img class="settings-bg-pic hover" src="${img.bgImgs[4]}" alt="Background 5">
<img class="settings-bg-pic hover" src="${img.bgImgs[5]}" alt="Background 6">
<div class="hover">
<img class="settings-bg-pic-upload" src="${img.bgImgs[0]}" alt="Arrow Up">
<p class="black-text">Upload</p>
</div>
</div>

How to get this code to move one class at a time

So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>

The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/