I am trying to build a portfolio website, with a moving gallery but the image is not displayed, it shows the alternative image instead. Any help is appreciated.Here is the code:
<div class="section1">
<img class="imgr"src="photo_1.jpg" alt="nothing">
</div>
I even copied the relative path from Vscode, but it is still not working.
It must be the path to the image. Try replacing "photo_1.jpg" with "./photo_1.jpg".
So, I have two images on a html page in my ionic project, and I want the second image to show up when the first one is clicked.
Therefore i added a onClick to my image like:
<img src="path"
alt="foo"
style="foo;
width:foo;
left:30%;top:30%"
class = "foo"
onclick="ng-model='bar'" >
And the second image
<img src="path"
*ngIf="bar">
But it is not working that way. Is it the wrong way? I tried it that way to avoid additional javascript.
You can accomplish this as follows:
<img src="http://via.placeholder.com/350x150/222222" (click)="hiddenImage.style.display='inline'"/>
<img #hiddenImage style="display: none" src="http://via.placeholder.com/350x150/888888"/>
But it may still be a better idea to do it differently depending on what your exact use case is.
Using *ngIf you would probably still need a variable that holds the value of whether the image should be shown or not in your template:
<img src="http://via.placeholder.com/350x150/222222" (click)="showImage=true"/>
<img src="http://via.placeholder.com/350x150/888888" *ngIf="showImage"/>
In your Component you should declare:
showImage: boolean = false;
I want to set background image for angularJS project. I get the image from backend and here is my code for the mainpage:
<div ui-view="main" ng-class="environmentBackgroundColorClass">
I tried adding,
ng-style="{'background-image': 'data:image/jpeg;base64,'+backgroundImage}"
It doesnt work, whereas the below works.
<img ng-src="data:image/png;base64,{{backgroundImage}}">
Should I use ng-style or ng-src, please help.
backgroundImage has the byte array of image
I have some problem with an <img> tag not working as I expect it. Here is my code:
<div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member">
<div class="fm-wrapper">
<div class="round-frame-bg">
<div class="round-frame wow animated">
<img [src] = 'familyPerson.image'>
</div><!-- /.round-frame -->
</div><!-- /.round-frame-bg -->
<p>{{familyPerson.qualities}}</p>
</div><!-- /.hide -->
</div><!-- /.col-md-4-->
userDataModel.family is an object containing some properties of family members in json format.
This is working as expected and the value of src is correct but the image is not getting displayed in the browser.
I even checked the network activity and the image is loaded but it's still not getting displayed.
However if I replace the <img> tag with one wheresrc is harcoded, the image is getting displayed just fine.
What is going wrong and how can I fix that?
<img [src] = "familyPerson.image">
the Code above should work on my opinion. You have to use double quotes to get the value from a var.
<img src = "{{ familyPerson.image }}">
This should also work on my opinion.
http://localhost:4200/assets/images/{{familyPerson.image}} This is working because you might have saved the image with the same name in your assets/images directory. You are only getting the name of the image from server and not the whole url. You should get full image url from server like
http://localhost:3000/assets/images/abc.png
or you can get "abc.png" only and change the server path yourself.
You should keep the images to server side so that it should be available when you try to access it
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;