I learn to use angularjs and bootstrap.
And in this templat:
<div class="row small-up-2 medium-up-3 large-up-4 container-fluid">
<div class="column col-lg-3">
<img src="../img/yst.jpg" class="thumbnail logo" alt="YST" />
</div>
</div>
I can't see the image. but when i insert url it work.
the error i get is:
GET http://localhost:63342/startup/img/yst.jpg 404 (Not Found)
What is the problem?
<img src="../img/yst.jpg" class="thumbnail logo" alt="YST" />
fix
<img src="img/yst.jpg" class="thumbnail logo" alt="YST" />
Related
I am struggling with one idea and I need help.
I have a dropdown and dropup list and they contain the same 2 images(flags). In dropup list I select 1 flag and I want in other list to automaticlly be selected the remaining flag.
For now I have hard coded images but eventually I want to display them dynamically.
return (
<div className="container">
<div className={isClicked ? "div2" : "div1"}>
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
<div id="switch">
<button onClick={this.toggleBox}>
<img src={iconSwitch} alt="logo" />
</button>{" "}
</div>
<div className={isClicked ? "div1" : "div2"}>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
</div>
I want this to be solved in ReactJS, if anybody have some idea how to solve please let me know.
Br
C
I was trying to adapt this example to my angular project. Here is a Plunkr link for my own adaptation, and the important code itself here:
I have no idea what am I missing or mistyped... Any help would be appreciated since it's already a week I am facing this issue and can't figure it out.
<div id="page">
<header id="landing" class="header">
<div class="medium-4 small-centered text-center columns">
<h4 class="text-center">Expand your dimensions</h4>
<a class="">Scroll to content</a>
</div>
</header>
<div data-sticky-container id="navigation">
<div data-sticky data-margin-top='0' data-top-anchor="landing:bottom" data-btm-anchor="page:bottom">
<div class="top-bar">
<div class="top-bar-left">
<a href="#">
<img src="http://placehold.it/150x38" alt="" />
</a>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About me</li>
<li>Portfolio</li>
<li>Get in touch</li>
</ul>
</div>
</div>
</div>
</div>
<br />
</div>
Thanks in advance.
I used angular with mansory, the default usage is :
<div masonry>
<div class="masonry-brick" ng-repeat="brick in bricks">
<img ng-src="{{ brick.src }}" alt="A masonry brick">
</div>
cf : http://passy.github.io/angular-masonry/
But I want to use mansory with a specific case like this :
<div masonry>
<div class="masonry-brick" ng-repeat="brick in bricks">
<div ng-if="date !== brick.publishedAt">
{[{ brick.publishedAt }]}
</div>
<div>
<img ng-src="{{ brick.src }}" alt="A masonry brick">
</div>
</div>
</div>
The specific case "ng-if" should be display an horizontal column with the publish date and after the associated articles display with mansory.
Actually, I cannot find the solution, and I don't knwon if it's possible.
Thank you for your help,
Best regards
i need to implement grid layout of images with multiple rows and columns in ionic framework. can anybody help me
<ion-content ng-controller="MenuCtrl as menuCtrl" >
<div class="row responsive-md">
<div class="col col-25" ng-repeat="image in images">
<img ng-src="{{image.src}}" style="height: 100px; width: 100px" />
</div>
</div>
</ion-content>
I have used to display my images in rows and columns by the following format. This will be help you. To work on css, you can use the browser style with responsive and apply the css to your ionic.
<div class="resize">
<div class="container">
<div class="images-align">
<figure ng-repeat="(imageKey, imageUrl) in images" class="col-xs-4 col-sm-3 col-md-3 col-lg-2" >
<img ng-src="{{imageUrl}}" />
</figure>
</div>
</div>
</div>
I've installed angular-masonry and tried to use it with my single-page Bootstrap view. The images from the ng-repeat directive render but only in a single column. I am not able to figure out why and I am not getting any JS errors.
This is my view:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>
Official Docs:
You still need to use masonry-brick either as class name or element attribute on sub-elements in order to register it to the directive.
Don't you need the masonry-brick class or attribute?
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
or
<div masonry-brick ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
Final sample:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>