I have a problem loading a component inside another component. It just doesn't show , but in browser the route changes , but my component doesn't update...
So i have:
--homepage
--coins--
--coinspreview <-- i cannot access this component;
--services
app-component.html
<app-homepage>
</app-homepage>
app-homepage.html
<section id="home">
<div class="bg">
<img class="my-bg" src="/assets/images/bg.jpg">
</div>
<div class="container middle">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<div class="hero">
<h4 class="hero-title">
Top 100 Cryptocurrency
</h4>
</div>
</div>
</div>
</div>
</section>
<section id="coins">
<app-coins></app-coins>
//here it shows my another component
</section>
app-coins.html
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-3 col-md-4 col-sm-6 col-6" *ngFor="let coin of coins$ | async">
<div class="main" [routerLink]="['./coins/coins-preview']">
<img class="mini" src="{{coin.image}}" alt="{{coin.name}}" />
<div class="name">{{coin.name}}</div>
<div class="prices">
<p class="coin-price">
Pret actual: {{coin.current_price}}
</p>
<p class="coin-market-cap">
Capitalizare: {{coin.market_cap}}
</p>
</div>
</div>
</div>
</div>
</div>
And this are all my routes inside app-routing-module.
const routes: Routes = [
{
path: '',
redirectTo: 'homepage',
pathMatch: 'full'
},
{
path: 'homepage',
component: HomepageComponent
},
{
path: "coins",
component: CoinsComponent,
children: [
{
path: "coins/coins-preview",
component: CoinsPreviewComponent
}
]
}
];
I don't know what to do else.. Im so stuck but I cannot understand why It doesnt load ????
When defining the child route dont repeat the parent route name. That should make it working
Related
im trying to display some images inside a v-for putting the results in the img src=""
<div v-for="piatto in portata" class="card mb-3">
<div class="row">
<div class="col-lg-4">
<img src="'/img/food/' + piatto.img_id + '.jpg'" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail" >
</div>
<div class="col-lg-8">
<div class="card-body mt-3">
<h3 class="card-title">{{piatto.food_name}}</h3>
<h4 class="card-text text-primary">{{piatto.price}}€</h4>
<button type="button" #click="sendOrder(piatto.food_name)" class="btn btn-dark">Aggiungi</button>
</div>
</div>
</div>
</div>
The <img src="'/img/food/' + piatto.img_id + '.jpg'" syntax doesnt seem to work. I dunno if im doing some error in the syntax, or maybe this way of solving the problem is just not viable.
Im pretty new to vue. Thanks in advance
If you are using Webpack
If the images are hosted somewhere on the Internet, you can do that
<template>
<section style="display: flex">
<div v-for="element in elements" :key="element.id" class="">
<img :src="`${imageInitialUrl}${element.imageId}`" />
<p>{{ element.name }}</p>
</div>
</section>
</template>
<script>
export default {
data() {
return {
imageInitialUrl: 'https://source.unsplash.com/random/200x200?sig=',
elements: [
{
id: 1,
name: 'bob',
imageId: '1',
},
{
id: 2,
name: 'patrick',
imageId: '2',
},
{
id: 3,
name: 'sarah',
imageId: '3',
},
],
}
},
}
</script>
This is how it will look.
This is how its written if the images are local
<img :src="require(`#/assets/images/${element.imageId}.jpg`)" />
With this kind of structure
I am making a webpage where i fetch movies using an api and i am trying to list the movie posters using the materilize css card in the same row, but it only gets listed on top of each other as a column.
app.js
class App extends React.Component {
constructor(props) {
super(props);
this.state={};
this.performSearch()
}
performSearch(){
$.ajax({
url:urlString,
success:(searchResults) =>{
console.log("Feteched succesfully");
//console.log(searchResults);
const results = searchResults.results
//console.log(results[0])
const movieRows = [];
results.forEach((movie) =>{
// console.log(movie.title);
console.log(movie.poster_path)
const movieRow = <MovieLists movie={movie}/>
movieRows.push(movieRow);
})
this.setState({rows:movieRows})
},
error:(xhr,status,err) =>{
console.error("Failed to fetch");
}
})
}
render() {
return (
<div className="App">
{this.state.rows}
</div>
);
}
}
export default App;
MovieLists.js
<div className="container">
<div className="row">
<div className="col s12">
<Movie key ={props.movie.id} image={props.movie.poster_path}
title={props.movie.title}/>
</div>
</div>
</div>
Movie.js
<div className="col s12 m6 l3">
<div className="card" >
<div className="card-image waves-effect waves-block waves-dark">
{
props.image == null ?
<img src ={'https://www.google.com/url?sa=i&url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Fomdb-search&psig=AOvVaw3Beb0rUUVxt3OsEfwzu07Q&ust=1585542435018000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJj8kIPsvugCFQAAAAAdAAAAABAD'}
alt="card image"
style={{width:"100%",height:360}}/>
:
<img src ={`http://image.tmdb.org/t/p/w185${props.image}`}
alt="card image"
style={{width:"100%",height:360}}/>
}
<div className="card-content">
<p>
</p>
</div>
</div>
</div>
</div>
The movieLists component lists the movie component on top of each other, i am trying to find the way to list them horizontally responsively.
Remember to always use the correct grid structure, which is:
.container > .row > .col
All cols MUST sit in rows to behave responsively. Adding a .row div around the movie.js output will fix your problem.
<div class="container">
<div class="row">
<div class="col">
[content goes here]
</div>
<div class="col">
[content goes here]
</div>
</div>
</div>
See this answer from yesterday:
Materialize grid s12 not working in mobile view or on Chrome's developer tools
Codepen with a single .row div to fix your problem (note I've had to chnage className to class):
https://codepen.io/doughballs/pen/eYNbwOQ
https://materializecss.com/grid.html
Hello guys,
I have a problem with back slash in background-image style in Vuejs and string replace in HTML not work and solution.
URL from inspecting element
http://localhost:8000/storage/banar-pages\July2018\WPNrFE6eXopKnjMqjNgW.jpg
From DB
banar-pages\July2018\WPNrFE6eXopKnjMqjNgW.jpg
Code from component file
<div class="block-entry fixed-background" :style="'background-image: url(' +link + '/storage/' + about.image +');'">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="cell-view simple-banner-height text-center">
<div class="empty-space col-xs-b35 col-sm-b70"></div>
<h1 class="h1 light">{{ about.name }}</h1>
<div class="title-underline center"><span></span></div>
<div class="simple-article light transparent size-4">{{ about.details }}</div>
<div class="empty-space col-xs-b35 col-sm-b70"></div>
</div>
</div>
</div>
</div>
</div>
Thank you
I need to replace image link it but flage not work image.replace('/\\/g', '/')
It looks like you're incorrectly passing a string as the first argument to String#replace(), which would result in a literal replacement (i.e., it would replace the first occurrence of /\/g in the string):
console.log('XX/\\/gXX/\\/gXX'.replace('/\\/g', '/'))
Remove the quotes from the first argument to make it a regular expression:
console.log('\\path\\to\\foo.png'.replace(/\\/g, '/'))
Then, your Vue template could be similar to this:
<div :style="'background-image: url(' +link.replace(/\\/g, '/') + '/storage/' + about.image.replace(/\\/g, '/') +');'">
new Vue({
el: '#app',
data() {
return {
link: 'http:\\placekitten.com',
about: {
image: '\\100\\100'
}
}
}
})
.dummy {
width: 100px;
height: 100px;
}
<script src="https://unpkg.com/vue#2.5.16"></script>
<div id="app">
<div class="dummy"
:style="`background-image: url(${link.replace(/\\/g, '/')}${about.image.replace(/\\/g, '/')})`">
</div>
</div>
You could have a method for processing that string and returning a revised URL:
methods: {
prepareURL(string) {
return string.replace('/\\/g', '/');
}
}
Component code:
<div class="block-entry fixed-background" :style="'background-image: url(' +link + '/storage/' + prepareURL(about.image) +');'">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="cell-view simple-banner-height text-center">
<div class="empty-space col-xs-b35 col-sm-b70"></div>
<h1 class="h1 light">{{ about.name }}</h1>
<div class="title-underline center"><span></span></div>
<div class="simple-article light transparent size-4">{{ about.details }}</div>
<div class="empty-space col-xs-b35 col-sm-b70"></div>
</div>
</div>
</div>
</div>
I have an array of objects, where I have the url of the image. I need to display these images in carousel:
<div class="item active">
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages | limitTo:'4'">
<a href="#"><img
ng-src="<?php
echo 'http://photos.hotelbeds.com/giata/';
?>{{image.path}}"
alt="Image" class="img-responsive"></a>
</div>
</div>
</div>
At this point I have only the first 4 pictures from the array. Next I display the next 4 images from the array:
<div class="item">
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages" ng-if="$index > 3 && $index <8">
<a href="#"><img
ng-src="<?php echo
'http://photos.hotelbeds.com/giata/';
?>{{image.path}}"
alt="Image" class="img-responsive"></a>
</div>
</div>
</div>
How can I display all the images using ng-repeat instead of manually adding <div class="item"> and setting manually $index?
Here i take some sample array you can modify it accordingly
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.hotelImages=[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}];
$scope.loopCount=Math.ceil($scope.hotelImages.length/4);
$scope.getNumber = function(num) {
var arr=[];
for(i=0;i<num;i++){
arr.push(i);
}
return arr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="item" ng-repeat="i in getNumber(loopCount) track by $index">
Carousel :-{{i}}
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in hotelImages" ng-if="$index >=(i*4) && $index <(i*4)+4" >
image:- {{image.id}}
</div>
</div>
</div>
</div>
If I understood you correctly you are aiming at having a nested ng-repeat, one for the items and one for the images. Let me know if I misunderstood you or you need some clarifications. Please see this snippet below:
var app = angular.module("app", []);
app.controller('exampleCtrl', function($scope){
$scope.hotels= [
[
{
path: "hotel1 path1",
otherprop: true
},
{
path: "hotel1 path2",
otherprop: false
},
{
path: "hotel1 path3",
otherprop: true
}
],
[
{
path: "hotel2 path1",
otherprop: true
},
{
path: "hotel2 path2",
otherprop: true
}
],
[
{
path: "hotel3 path1",
otherprop: false
},
{
path: "hotel3 path2",
otherprop: false
},
{
path: "hotel3 path3",
otherprop: false
},
{
path: "hotel3 path4",
otherprop: true
}
]
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="exampleCtrl">
<div class="item" ng-repeat="hotel in hotels">
<p>This is Hotel #{{$index+1}}</p>
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in hotel">
<a href="#">
<img ng-src="{{image.path}}" class="img-responsive" alt="(this is alt text)"/>
Image {{$index+1}}'s path: {{image.path}}
</a>
</div>
</div>
</div>
</div>
</div>
here is my index.html
<html ng-app="dempApp">
<head>
<!-- CSS -->
</head>
<body>
<div ng-switch on="templateHeader">
<div ng-switch-when="login">
<div loginheader></div>
</div>
<div ng-switch-when="home">
<div homeheader></div>
</div>
</div>
</body>
<!-- JS scripts -->
</html>
My app.js has the directives
demoClientApp.directive('loginheader', function () {
return {
restrict: 'A',
replace: true,
templateUrl:'views/loginheader.html'
}
})
demoClientApp.directive('homeheader', function () {
return {
restrict: 'A',
replace: true,
templateUrl:'views/homeheader.html'
}
})
loginheader.html is like following
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
<h1>
<span class="blue">DemoApplication</span>
</h1>
</div>
<div class="position-relative">
<div ng-view></div>
</div><!-- /position-relative -->
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
It has ng-view inside and similarly for homeheader directive I have another html file which also has ng-view.
Based on path, I am setting value of templateHeader and its switching the directive. But the page is blank now and shows error.
Error: Template must have exactly one root element. was: <div class="main-container">
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
<h1>
<span class="blue">DemoApplication</span>
</h1>
</div>
<div class="position-relative">
<div ng-view></div>
</div><!-- /position-relative -->
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
If I don't use the loginheader directive and use the html directly, it is working fine and the other homeheader directive is working. Why is that?
How to solve it?
UPDATE 1
It is working. But the problem is when the path is just localhost:9000 it is not redirecting to login. Earlier it used to route to login if the user enters a wrong path or not logged in. So now when I just type the url localhost:9000, it is showing the blank page and the error. Here is how I route.
var demoClientApp=angular.module('demoClientApp', ['ngCookies']);
demoClientApp.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/home', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl'
})
.otherwise({
redirectTo: '/login'
});
}]);