I have an img object with a src that will change after my http request.
How can I detect a change in the property for this img inside my-custom-directive?
< img my-custom-directive [src]="user.photo" />
You can do property binding for directives like this:
<img [my-custom-directive]="user.photo" [src]="user.photo" />
Plunker: http://plnkr.co/edit/YQVR1peTxTLYZlhrZJxF?p=preview
Related
I wanna pick the src attribute value on the HTML and pass it to the css/scss file in a variable to be able to just add it to the url() property:
<style>
img[src]{
background-image:url(attr(src));
}
</style>
And for every different img just grab their src value, add it inside the url property and make it the background image so I don't have to code a lot or code each single different image.
-
I've tried but does not work, i also tried using custom properties but i wanna confirm that there is no way to do this or a similar solution.
Thanks
No, you will need javascript to get the value attribute and use it as a value elsewhere
here a possible example with a css var(--var) so it can be easily reused:
let imgs = document.querySelectorAll('body img');
[...imgs].forEach((img) => {
img.setAttribute("style", "--bg: url(" + img.getAttribute('title') + ");");
});
img {
padding: 5em;
background: var(--bg) 0 0 / cover ;
box-shadow:inset 0 0 5em
}
<img src="https://picsum.photos/id/1020/200/300" title="https://picsum.photos/id/1020/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1015/200/300" title="https://picsum.photos/id/1015/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1050/200/300" title="https://picsum.photos/id/1050/200/300">
untill the full table turns green at https://developer.mozilla.org/en-US/docs/Web/CSS/attr()
Is there any way how to replace the path location using span or etc. that comes from the Jquery, or is there any shorcut in Django?, Currently as you can see I'm trying to override the path that comes from my jquery src="/media/<span id=image></span>". Is there any other way to pass the path image that comes from jquery into the img src?. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
Jquery
$(document).on('click', 'a[data-role=show_scanned]', function(){
let csrf = $('input[name=csrfmiddlewaretoken]').val();
var path = $(this).attr('id'); #Image path example: image.jpg
var assign = $("#image").html(path);
$("#scanned_show").modal('show');
});
html retrieve
<img class="card-img img-fluid mb-1" src="/media/<span id=image></span>" alt="Card image cap" style="width: 900px;height: 600px;">
The line below can get the text of a span
$("#image").text()
You can then assign this to the src attribute of the img tag:
$("#imageDisplay").attr("src", $("#image").text() );
Demo:
// Add click event
$("#load").click(function() {
// Add text from span to src attribute of img
$("#imageDisplay").attr("src", $("#image").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id=image>https://via.placeholder.com/150</span>
<button id="load">Load Image</button>
<img id="imageDisplay">
Everytime a checkbox inside my template is selected, I want to add a class to my polymer element or change polymer element's attribute.
Since my element uses label for attribute, I bound the ID of the checkbox to when instantiating the element in my markup
<label for="{{uniqueid}}" on-tap="{{toggle}}" />
<input type="checkbox" id="{{uniqueid}}" class="select" checked="{{checker}}">
<img src="{{image}}" alt="" class="prod-img">
<div class="grid-details">
<span>{{designer}}</span>
<span>{{product}}</span>
<span>{{currency}} {{price}}</span>
<span>Shipped from {{info}}</span>
</div>
</label>
I would then call the element like so
<gmselect-element uniqueid="four" image="http://i.imgur.com/fkq1QKq.jpg" designer="CUCARELIQUIA" product="Castellano Suede Bag Redder" info="Gijon, Spain" price="650" currency="$"></gmselect-element>
My toggle function looks like below
toggle: function() {
this.$.grid.setAttribute("class", "grid true");
this.setAttribute("selected", "true");
}
However, instead of setting it to true here, I would like to check the value of the checkbox's checked property. Since ID is not static, I can't get element using the $ functionality. I also don't know how to escape a data bound in moustache's to get its value inside a method.
this.$.grid.classList.add('classname')
this.$.grid.classList.remove('classname')
You've bound the checked value to {{checker}}, so you should be able to just refer to this.checker in your toggle function.
If you need to, you can also get the model data from the event. See:
https://www.polymer-project.org/1.0/docs/devguide/data-binding
How to set alternate value for Image and BitmapImage controls in flex 4 like HTML img tag
<img src="url" alt="some_text">
But I want to display alternate image if the image is not correct.
Is it possible?
This will help you.
The catch here is IOErrorEvent. If images not loading correctly it throws IO_ERROR EVENT (might be incorrect path). Also aware of Cross Domain Security issue.
protected function img_creationCompleteHandler(event:FlexEvent):void
{
img.addEventListener(IOErrorEvent.IO_ERROR, function(event:IOErrorEvent):void
{
img.source = "url";//Make sure it should be Right path;
});
}
<s:Image id="img" toolTip="Hey tooltip here" creationComplete="img_creationCompleteHandler(event)" />
is it possible to make a class for the src, onmouseout and onmousehover in CSS3 ?
<img src="http://www.somesite.com//images/g.png" onmouseout="this.src = 'http://www.somesite.com/images/g.png'" onmouseover="this.src = 'http://www.somesite.com/images/g-colored.png'" />
You can use the :hover pseudo-rule as well as the background style attribute with the url() function to accomplish this. Start by using some sort of "blank" tag, then use something like this:
#my_tag_id
{
background: url('/some/url/to/the/default/image.png');
}
#my_tag_id:hover
{
background: url('/some/url/to/the/hover/image.png');
}
This would not use the src attribute of the img tag, per se, but has the same effect without any Javascript