I have tried all the solutions on the internet but have not been able to print the pictures on the screen in any way. Am I making a very simple mistake? File names and folders are correct.
While giving the path, I want to get the picture registered with the name subclubName from the related folder by giving sub-club name from the data. E.g Art.jpg. I would be very happy if you could help.
<template>
<div>
<div class="container">
<a class="logo" href="#">Social Interest e-Club</a>
<div class="start">Start</div>
<div class="progress-bar-front bar"></div>
<div class="progress-bar-back"></div>
<div class="finish">Finish</div>
</div>
<form class="questionnaire-result" action="#">
<h1 class="h1">Here are your result!</h1>
<div class="grid-container">
<h2 class="sub-club"> Sub-Club</h2>
<h2 class="score"> Score</h2>
<h2 class="join-que"> Want to Join?</h2>
<div class="sub-club-section " v-for="(subclub,index) in subclubs" :key="index">
<img class="image" :src="'#/assets/sub-clubs-images/'+ 'subclub.subclubName'+'.jpg'" width="75">
<h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
<h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
<div v-if="subclub.score>50">
<input class="join-btn option-input checkbox" type="checkbox" v-model="subclubName" :value="index" >
</div>
</div>
<button #click=" goToHomePage()" class="button "><span> JOIN </span></button>
</div>
</form>
</div>
</template>
<script>
export default {
name:"result",
data(){
return{
subclubs:[
{
id:1,
subclubName:"Yoga",
score:70,
},
{
id:3,
subclubName:"Novel",
score:60,
},
{
id:4,
subclubName:"Piano",
score:45,
},
]
}
},
methods:{
goToHomePage(){
this.$router.push("/");
}
}
}
</script>
Just using "#/assets/" wont work to get root (src) directory url. Wrap the string with require() and remove quotations from subclub.subclubName variable
Like
<img class="image" :src="require('#/assets/sub-clubs-images/' + subclub.subclubName + '.jpg')" width="75">
Also you can use ES6 template literals to concatenate strings with variables as below
<img class="image" :src="require(`#/assets/sub-clubs-images/${subclub.subclubName}.jpg`)" width="75">
you must use require. like this:
<img class="image" :src="require('#/assets/sub-clubs-images/'+ subclub.subclubName+'.jpg')" width="75">
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
This question already has answers here:
Passing and binding img src from props in Vue.js
(6 answers)
Closed 1 year ago.
<template>
<form class="questionnaire-result" action="#">
<h1 class="h1">Here are your result!</h1>
<div class="grid-container">
<h2 class="sub-club"> Sub-Club</h2>
<h2 class="score"> Score</h2>
<h2 class="join-que"> Want to Join?</h2>
<div class="sub-club-section " v-for="(subclub) in subclubs" :key="subclub.id">
<div class="responsive">
<div class="gallery">
<img class="image" :src="subclub.path">
<div class="desc">{{subclub.name}}</div>
</div>
</div>
<h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
<h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
<div v-if="subclub.score>50">
<input class="join-btn option-input " type="checkbox" v-bind:value="subclub.name" v-model="selected_subclubs" >
</div>
</div>
{{selected_subclubs}}
<button #click=" goToHomePage()" class="button "><span> JOIN </span></button>
</div>
</form>
</div>
</template>
<script>
export default {
name:"QuestionnaireResult",
data(){
return{
selected_subclubs:[],
subclubs:[
{
id:1,
name:"Yoga",
score:70,
path:"#/assets/sub-clubs-images/Yoga_mini.jpeg",
},
]
}
},
methods:{
goToHomePage(){
this.$router.push("/");
}
}
}
</script>
I apply it like this , I put the path in the data to company src. It worked this way for many people. but I cannot put the image on the page . It works when I pass the path directly to the src as a string.I can't understand how I can't get the path.Can you help me.
I tried to do it like this: Vue.js image v-for bind
You need to import the image from webpack using require to pass it using javascript
See these other posts for more details
How to bind img src to data in Vue
Passing and binding img src from props in Vue.js
I want to return HTML Code from a .js file.
Here is my code:
HTML:
...
..
.
<script id="message-response-template" type="text/x-handlebars-template">
<div class="sender-message-line table-content vivify swoopInBottom">
<div class="table-content-cell" id="ava">
<img src="/static//img/pro_2.png" alt="DP" class="avatar">
</div>
<div class="msg-conatiner">
<div class="actual-msg"></div>
<span>Message</span>
<div class="">
<div class="message-seen text-right">{{time}}</div>
</div>
</div>
</div>
</script>
...
..
.
JS
setTimeout(function () {
var contextResponse = {
response:$('HTML CODE I WANT TO RETURN').html(),
time: this.getCurrentTime()
};
I can only return string files but when I want to return the whole HTML code that I wrote up there, nothing shows up
I tried :
response: $('<script id="message-response-template" type="text/x-handlebars-template"> <div class="sender-message-line table-content vivify swoopInBottom"> <div class="table-content-cell" id="ava"> <img src="/static//img/pro_2.png" alt="DP" class="avatar"> </div> <div class="msg-conatiner"> <div class="actual-msg"></div> <span>Message</span> <div class=""> <div class="message-seen text-right">{{time}}</div> </div> </div> </div> </script>').html()
If you're using Jquery:
$("#yourDiv").load('yourhtmlfile.html #readMe');
And add the id to your html:
<div><div id="readMe"><p>text</p></div></div>
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>
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>