I want to display multiple images starting with _id value in ng-repeat in the view like this .
<div ng-repeat="property in properties">
<img src="uploads/#{{property._id}}.jpg" alt="Smiley face" width="42" height="42"/>
</div>
now consider this
if
_id = 1
there are multiple images in the uploads like this
/uploads/
1a.jpg
1b.jpg
1zaz.jpg
1io.jpg
i want to show all those images against every property,.
Help me for this.
now consider this if
_id = 1
there are multiple images in the uploads like this
/uploads/
1a.jpg
1b.jpg
1zaz.jpg
1io.jpg
i want to show all those images against every property
The only way you can do that is if you know in advance that the names have a, b, zaz, and io appended to them. You can't use a wildcard to say "repeat this img element for any files that happen to exist."
So as part of your build process or similar, you'll need to identify the actual images that exist, and then cover all of them within the ng-repeat. The details of how you do that are obviously going to be highly specific to your environment, so we can't give you those specifics.
Related
I am scraping HTML, and want to replace images in the articles with images I have hosted on my own infrastructure instead of hotlinking to the other website.
so lets say the article has the following html but with different image names on the page multiple times, and I have no idea of how many images there will be per page, so will have to be an array:
<img src="HXXP://domain.com/aaa/aaaa/aaa/123.jpg" alt="asd" style="width:100%">
<img src="HXXP://domain.com/aaa/aaaa/aaa/456.jpg" alt="asd" style="width:100%">
and I have extracted those images and uploaded them to my own host and now have a list of images with the following link, which will have the same files names, but different domains and urls
HXXP://example.com/bbb/bbbbb/bbbb/123.jpg
HXXP://example.com/bbb/bbbbb/bbbb/456.jpg
how to I replace the original links in the html with my own?
I'm thinking I'm going to need some mixture of for loop replace functionality. Does anyone have an example of this at all?
here is the below code fiddle for your answer, as you said you want to replace the article image with your own, you can fetch the all article images from js by query selector of getElemetsByTagName then you can loop through it and replace it from the array, here i assume order of article images are same as the images stored by your own
let myOwnImgs= ['HXXP://example.com/aaa/aaaa/aaa/789.jpg', 'HXXP://example.com/aaa/aaaa/aaa/101.jpg']
var shownImg = document.getElementsByTagName("img");
for(var i =0; i< shownImg.length; i++){
shownImg[i].src = myOwnImgs[i] // updating main image with array image
shownImg[i].alt = myOwnImgs[i].slice(-7) // for verifying
}
<img src="HXXP://domain.com/aaa/aaaa/aaa/123.jpg" alt="123">
<img src="HXXP://domain.com/aaa/aaaa/aaa/456.jpg" alt="456">
I don't know why this don't work, only the first one charge my img the others no.
1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" />
2. <img :src="'../assets/batatas.jpg'" :alt="item.title" />
3. <img :src="item.img" :alt="item.title" />
I want to use the las one, because i use my own json to charge the iformation, but when I try to put the img only works the first one, in and when i watch the web info i can see the first put this (src="/img/batatas.79e29299.jpg") and the two others put (src="../assets/batatas.jpg") on my web.
I'm starting to use vue and i can't find why this happends.
Welcome to StackOverflow, please make sure you search for similar questions before asking yours. Is always nice to avoid duplicates.
Here it is one question/answer that is similar to yours:
Static image src in Vue.js template
You will need the "require" since your object is dynamic and Vue needs to figure out how to map the static asset with the one generated in the build process. That's the one (src="/img/batatas.79e29299.jpg") this random number is the actual end result of the image, that will be visible to the users.
Using the require will be like saying "convert the item.img URL to the actual end-result image URL"
I change my json to img: #/assets/batatas.jpg to img: batatas.jpg and then in my component i use <img :src="require('#/assets/' + item.img)" :alt="item.title" /> and this works for me, the cassioscabral answer helps me to understand and trying to my self with this info i solvent this question, thanks to all people who coment this post for help me, I'm really grateful.
The title already tell's a little bit. I'm getting a list of documents with links and images like this:
<img class="Thumbnail" src="sourcetothepdfimage.png" id="/path/pdf.png"/>
The only two things that may differ are src and id. What I try to reach now is to replace the image src depending on its ID. The ID may be /path/pdf.png or /path/word.png or something completely different (which I don't know yet).
What would be the recommended way to achieve this? I have three different images for the replacement (one for PDF, one for word files and one generic for all other unknown file types).
I think document.getElementByID doesn't make that much sense because I only know two fix IDs. With this I can change the src for PDF and DOCX but not for any other, right?
So document.getElementsByClassName would be the targeted solution, but how can I iterate through all five or more listed elements with the class "Thumbnail"?
I'm barely new to the Dev world and like to learn it.
It's simple using jQuery.
// get all img's using class selector
// and use `attr()` method with callback which iterate internally
// within the callback return the id( within callback this refers to the current element DOM object)
$('.Thumbnail').attr('src',function(){
return this.id
})
<img class="Thumbnail" src="sourcetothepdfimage.png" id="/path/pdf.png"/>
Try (no jquery)
[...document.querySelectorAll('.Thumbnail')].map(img=> img.src=img.id);
console.log([...document.querySelectorAll('img')]);
<img class="Thumbnail" src="sourcetothepdfimage.png" id="/path/pdf.png"/>
<img class="Thumbnail" src="sourcetothesomimage.png" id="/path/pdf2.png"/>
<img class="Thumbnail" src="sourcetothedocimage.png" id="/path/doc.docx"/>
I am trying to create an animal's database, for an animal shelter. So far, what I have is a set of tables with the animal's species and when the user chooses the species it shows all animals available. Now I want the user to click on the animal chosen and more details about that animal, such has, location, gender, size, will show. Problem is, I know very little about Javascript/ HTML and I am encountering lots of issues. One of them is showing the image in this third screen of more details. What I have so far with HTML is:
<div class="row" style="text-align: center">
<img src="foto_animal" height="180">
</div>
"foto_animal" is the column in table "Animal" that holds the Image URL. Is there anything I should change with Javascript or is it just a HTML problem? Thanks in advance.
EDIT
I manage to get the URL, this is the script.js file
var populateContact = function(data) {
$('#contact_photo').text(data.foto_animal);
This is the index.html
<h2><span id="contact_photo"></h2>
It shows the URL, but now I want it to be recognize as an image.
EDIT : To have your users download the as requested i nthe comments, try adding a tag and setting it's download property.
Here is an example.
Via html, when referencing an image in src property of the <img> tag, add the file extension of your image file
assuming your foto_animal is a jpeg file and in the same location with the html files,
<img id='myImg' src="foto_animal.jpg" height=180px>
Via javascript,
You simply call the element using document.getElementByID and set the .src property
document.getElementById("myImg").src = "foto_animal.jpg";
Via jquery,
Simply use the .attr property to set src of your tag ID
$("#myImg").attr('src', 'foto_animal.jpg');
I have a very old site with lots of files, for years it was put together and orgainized by year and in a particular fashion. Well I am upgrading the site. But in one section an "Articles" section I have close to 1,000 files, that I don't want to go through and manually edit one or two images per.
So I am hoping i can figure out a way to match the source tag where when the source is ../imgs/ I can find the actual file name being used and just change the source. My problem is finding the source attribute matching it to the dired and then getting the image name off the end of it. when the full path could be like
../imgs/i2012/image-file.png, ../imgs/i2011/image-file.png, ../imgs/i2010/image-file.png, ../imgs/i20xx/image-file.png "image-file.png" just being an arbitrary example
Its hard to visualize a image tag, so I am adding one here for reference..
<img src="../imgs/i2012/example-image.png" alt="example-image" vspace="5" hspace="5" align="left" />
And to try and re-elaborate, not all images on the site stopped working, and all else, but the ones that have use an image source attribute similar to the above, but the i20xx and file name are different. So. I am trying to figure out how to take that image src tag. Find if it has ../imgs/ in it, and and if it does, I'd like to grab the "example-image.png" from it, so I can apply a new URL overall to the src attribute in the end using JS, which changing it isn't my problem, matching it so I can then get the file, and change the url appending that file to the url is my problem
You can use the attribute starts with selector to match any images with a source starting with
../imgs/, and then iterate over those images, getting the filename into an array:
var images = [];
$('img[src^="../imgs/"]').each(function(i, el) {
images.push( $(el).attr('src').split('/').pop() );
});