I am currently using Vue JS and the data is coming from API .
to call a data from API I use this method {{services.service_picture}}.
But the problem is I am unable to display the image with this method below.
Can you please send some ideas on how to display it using Vue JS
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" /> </div>
</div>
var main = new Vue({
el: "#main",
data: {
services: [],
path: 'https://examplemyapisource.com'
},
});
API from https://examplemyapisource.com
[
{ "service_picture": "18_1516090191.jpg", } ]
You try here:
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services"></p>
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</div>
Credits to Huang Hong
<img :src="path+'/images/services/'+services.service_picture" class="img-circle" alt="Services">
Note the your v-for only includes the element, therfore you cannot use 'picture' inside the element.
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" />
You need to make these changes to get a perfect image.
Here you closed the <p> tag before the image.close that <p> tag after image
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services">
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</p>
</div>
Related
I have the following snippet of code in html:
<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="img/product-thumb-13.jpg" alt="">
</div>
<div class="product-gallery">
<img src="img/product-thumb-14.jpg" alt="">
<img src="img/product-thumb-75.jpg" alt="">
<img src="img/product-thumb-76.jpg" alt="">
</div>
</div>
</div>
</div>
I would like to allow users of the website to click on one of the three thumbnails (14,75 and 76) in the "product-gallery" class and allow it to be visualized as main image (like product 13), hence in bigger size, while the other 3 stay smaller.
The process should be applicable to anyone of the three images on click (typical visualization of products in an ecommerce website, where a particular image is made bigger on click and the others stay small).
I have looked online for applicable methods but cannot find the one I am looking for.
Thanks for the help, have a good day!
This can be achieved by adding an onClick event handler for all the secondary images to change the src attribute of the central image. I have used specific ids to select the images from the DOM. Then we flip the image sources.
<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img id="primary-img" src="img/product-thumb-13.jpg" alt="">
</div>
<div class="product-gallery">
<img id="secondary-img" src="img/product-thumb-14.jpg" alt="">
<img id="secondary-img" src="img/product-thumb-75.jpg" alt="">
<img id="secondary-img" src="img/product-thumb-76.jpg" alt="">
</div>
</div>
</div>
</div>
window.onload = function(e){
const secondaryImages = document.querySelectorAll("#secondary-img")
const primaryImage = document.getElementById("primary-img")
secondaryImages.forEach((image) => {
image.addEventListener("click", function() {
const backupSrc = primaryImage.src
primaryImage.src = image.src
image.src = backupSrc
})
})
}
EDIT: fixed code bugs (string literals)
This is my first time using react and I am sure that code given is probably not using react's best practices but I am just playing around with it to understand it for now, my problem is that I am trying to access the divs and paragraphs inside the modal but document querySelector returns null. Any ideas? Thanks
moreInfo(movie) {
const movieModalImg = document.querySelector(".movieModalImg");
const movieModalTitle = document.querySelector(".movieModalTitle");
const movieModalRunTimeNum = document.querySelector(
".movieModalRunTimeNum"
);
}
render() {
return (
<div>
<div id="modal">
<Modal
isOpen={this.state.setIsOpen}
onRequestClose={this.closeModal.bind(this)}
contentLabel="Example Modal"
>
<a className="closeModalBtn" onClick={this.closeModal} href={"#"}>
×
</a>
<div className="modal-wrapper">
<div>
<img src={moviePoster} className="movieModalImg" alt=""></img>
</div>
<p className="movieModalTitle"></p>
<div className="movieModalRunTime">
<h4>Runtime:</h4>
<p className="movieModalRunTimeNum"></p>
<p>Minutes</p>
</div>
<div className="movieModalProductionCountry">
<h4>Production Countries:</h4>
<p className="movieModalProductionCountries"></p>
</div>
<div className="movieModalVoteCount">
<h4>Vote Count:</h4>
<p className="movieModalVoteCountNum"></p>
</div>
<div className="movieModalRevenew">
<h4>Revenew:</h4>
<p className="movieModalRevenewNum"></p>
<p>$</p>
</div>
<div className="movieModalBudget">
<h4>Budget:</h4>
<p className="movieModalBudgetNum"></p>
<p>$</p>
</div>
</div>
</Modal>
</div>
<a
href="#"
className="movieCoverMoreInfo"
onClick={this.moreInfo.bind(this)}
>
<img className="moreInfoIcon" src={info} alt=""></img>
More Info
</a>
</div>
);
}
I have an image to display thanks to a lighbox.
If I get the image online with a link http there is no problem but if I want to recover an image of the database I encounter a problem. I would like to display the image in the tag as below.
IF you have tracks I thank you in advance. Beautiful day
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">
</a>
TO
<div class="row" *ngFor="let drawing of drawings;">
<a href="????" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img style="max-width:400px;" *ngIf="drawing.image" [src]="drawing.image">
</a>
</div>
Since you use angular, take advantage of it :
<div class="image-container" (click)="navigate()">
<img src="...">
</div>
navigate() {
const a = document.createElement('a');
a.href = '...';
a.setAttribute('data-toggle', 'lightbox');
a.setAttribute('data-gallery', 'gallery');
a.click();
a.remove();
}
This will work as if you were actually clicking on a link, but you don't actually use alink in your template.
Other than that, I don't see an issue with appending an image to a link :
<a href="google.com" target="_blank">
<img src="https://via.placeholder.com/500x100?text=ImagePlaceholder">
</a>
I am following one of the bootstrap's template and I am dealing with the next problem:
Template
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="img/portfolio/fullsize/1.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</a>
</div>
My problem is the following:
`href` in the `<a>` seems to shows in a modal the image in a bigger size, but I am trying to use it as a variable.
I have tried to use ng-ref="myvariable" but it does not happen (either an error)
How could I do it?
Maybe you should do the next:
...
<a class="portfolio-box" href={{ your-variable}}>
...
Value of "your-variable" should be in the component of this template.
I got a list of Pizza, I would like to automatically import their name in a html element.
I'm wondering what is the best way to work with object or values like that. I was thinking to use Razor language (because I work on ASP.net)but I'm not sure maybe JavaScript could do the job too...?
Could you give me a short example of what my code would look like.
<div class="col-sm-6 col-lg-3">
<div class="thumbnail">
<img src="http://lorempixel.com/240/200" alt="">
<div class="caption">
**
<h3>Pizza's name</h3>
**
<p>Lorem</p>
<p>Ajouter à ma commande</p>
</div>
</div>
</div>
javascript could do the job too.
Yes, you can do that with two approaches, using razor or using java script.
If you want to use razor:
<div class="caption">
#foreach (var item in ListOfPizza)
{
<h3>#item.Name</h3>**
}
Or you can use javascript:
$(document).ready(function() {
var testData = [{
"Name": "pizza1"
}, {
"Name": "pizza2"
}];
$.each(testData, function(i, v) {
$('.caption h3').append(v.Name+'<br>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 col-lg-3">
<div class="thumbnail">
<img src="http://lorempixel.com/240/200" alt="">
<div class="caption">
**<h3></h3>**
<p>Lorem</p>
<p>Ajouter à ma commande</p>
</div>
</div>
</div>
Note: Here i used test data, which needs to change accordingly!