I'm trying to do an overlay when hovering images in React with this tutorial: w3 schools tutorial.
My code:
<div className="grid-item" key={movie.id}>
<img className="grid-images" alt={movie.title} src={movie.src}>
<div className="overlay">{movie.title}</div>
</div>
My error message: Parsing error: Expected corresponding JSX closing tag for <img>
As JSX doesn't allow not closing the img-tag, this method doesn't work. I can't seem to find an alternative how to do this in React with css. Anyone? :) Thanks!
You simply need to self-close the img tag by adding '/' just before the >:
<img className="grid-images" alt={movie.title} src={movie.src} />
Related
*Sorry for formatting: typing from the phone.
Hello guys!
Help me please with a problem: embedded img inside div not changing it's width in respect to it's parent.
<div display="block" position="absolute" width="608.5px" height="480.5px" text-align="center" top="20%" left="50%">
<img src="here_is_source" width="100%" height="auto">
</div>
So, I can't use CSS because I'm appending it using JS (element.appendChild), as well as creating properties of the element using element.setAttribute.
Thank you for suggestions, guys!
You can not set the props you are setting directly to a div. Use style, or insert a CSS style in the JS you describe.
Below solution solves your issue as stated, however also consider using
element.classList.add("my-class");
<div style="display:block;position:absolute; width:608.5px;height:480.5px;text-align:center;top:20%;left:50%;">
<img src="https://via.placeholder.com/400" width="100%" height="auto"/>
</div>
I am trying to call an Image dynamically from thesportsdb API.
After destructuring, I am trying to set the image in the background of this div. But It doesn't show the image. It only works when I add a static image in CSS. It's a react practice project and everything else is working fine.
How may I solve this?
<div style={{background: strStadiumThumb}} className="banner-img">
<img className='img-fluid' src={strTeamBadge} alt="" />
</div>
Firstly, please add the relevant code directly into the question, not pictures of code. Secondly, background isn't a valid div tag attribute. If you want to inline the background style, you can use the style attribute, which is an object property that lets you inline CSS styles into your element:
<div style={{ backgroundImage: `url(${strStadiumThumb})` }} className="banner-img>
...
I'm trying to pass html to a viewchild so it can add it to it's own components html. Until now I haven't found an answer how to solve this.
I'm completely new to Angular, so most of the answers I've read on alot of topics I don't quite understand which makes it pretty hard.
The parent is using NgbModal (#ng-bootstrap/ng-bootstrap) to open a bootstrap modal. Since I don't want to keep repeating the same code for the modal itself all trough the project, I want to use a component for it. The modal component (viewchild) is working, except that I can't manage to pass html to the modal component so it can use the html to fill in the modal-body.
Triggering the modal like:
this.modalService.open(content, options).result;
Is there some way to use the inner html for example like:
<app-modal #modal>
<img src="test.png" alt="test" />
</app-modal>
So the image will be the content of the bootstrap modal.
I managed to finally fix it by wrapping the included component into ng-template.
Parent component's html including the module/viewChild:
<ng-template #imageFileModalContent let-c="close" let-d="dismiss">
<app-modal>
<img [src]="msgFile" />
</app-modal>
</ng-template>
Modal's html (viewChild):
<div class="modal-body form-group">
<ng-content></ng-content>
</div>
Read : Content Projection
you can make use of ng-containt : Working Demo
app-modal.component.html (selector will be app-modal)
<div class="dynamiccont">
<ng-content></ng-content>
</div>
when you use this component like this
<app-modal #modal>
<img src="test.png" alt="test" />
</app-modal>
this will work for you, key part is to make use of ng-content which helps you to include content.
Basically in my ASP.NET MVC4 project I'm trying to have my validationmessages as tooltips (which gets displayed when hovered over a certain image).
Right now the error message is inserted into the image title - however I'd like to ONLY display the image when it has a title (when it doesn't have a title there is no error message).
How can I do this?
I don't suppose it is possible through CSS so a js/jquery solution would work too.
To clarify I need to check update the display as the title changes during runtime.
An initial check is not gonna do it.
Here is the pure CSS solution.
The CSS Code:
img{display:none;}
img[title]{display:block;}
Here is a WORKING DEMO
The HTML:
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" title="" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
The CSS:
img{display:none;}
img[title]{display:block;}
Hope this is what you are looking for.
Only display images with a title?
$('img').filter(function(i, el){
return !$(el).prop('title');
// (empty/undefined titles evaluates as false)
}).hide();
Is this what you're asking for?
Perhaps this css selector is enough (will only work in modern browsers):
img:not([title])
{
display: none;
}
I have a very simple div with an image inside:
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>
And a very simple Jquery function for when you hover over the image:
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?
There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.
It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
If you look at your javascript, it will:
match any child image of an element with class name stack4
Add a hover listener to each image
Display a prompt on hover.
IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.
Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});