How to Generate this HTML in Jade - node.js

How can I generate this HTML using Jade
<a class="btn btn-primary btn-large" data-toggle="modal" href="#websiteModal">
<i class=" icon-map-marker icon-white"></i>
Configure for Website</a>
I tried
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal") Configure for Website
i.icon-map-marker.icon-white
But it puts the <i> after "Configure for Website" text.

You can either do:
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal")
i.icon-map-marker.icon-white
| Configure for Website
Or if you are feeling fancy:
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal")='Configure for Website'
i.icon-map-marker.icon-white

Related

using Navlink in react router dom but not loading the respected page (url is changing)

import React from 'react'
import { NavLink } from 'react-router-dom';
function Header() {
return (
<div className='header'>
<NavLink to="/">
<img className='header_logo' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMXl_zkdU92_MYc2tqty6pIjvG4JMAtJoQ5yA0dE4UfbS2R5l-RUiMczSNtQ1OAKcv-ZU&usqp=CAU'></img>
</NavLink>
<div className='header_nav'>
<NavLink to="/checkout">
<div className='header_optionBasket'>
<ShoppingBasketIcon />
<span className='header_linetwo header_basketCount'>
{basket.length}
</span>
</div>
</NavLink>
</div>
</div>
)
}
export default Header;
here after using navlink my url is changing but it not loading the components.Please someone help. I donot know where the problem is coming
I reinstalled using below command :
npm install react-router-dom --save
I don’t know how it happened but "--save" works for me
I had the same problem, I solved it by installing the latest version
npm install react-router-dom

Angular 10 Module parse failed: Unexpected token

So, after i upgraded my Angular Application to Angular 10 (from 7) i get the Following Error when serving the Application via ng serve.
ERROR in ./src/app/lizenz-list/lizenz-list.component.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
The HTML file looks like this
<ng-template #CRUDTemplatePluginTableCaption>
<div class="ui-g-12 ui-md-6">
<button type="button" style="margin-right: 10px" pButton icon="ui-icon-add"
(click)="addCRUDItem()"></button>
<button type="button" pButton icon="far fa-server" (click)="getServerInfo()"></button>
</div>
</ng-template>
The template of lizenz-list.ts looks like this:
template: `${CRUDBasicListComponent_Template || ''}${LizenzListComponent_Template}`
Perhaps this could be the issue?
On Angular 7 everything worked fine, i just cant find the answer to the Problem.
EDIT: I am Using PrimeNg as an UI Library.
CRUDBasicListComponent_Template is an Exported html Template that looks like this:
<p-table [properties etc..]>
<ng-template pTemplate="caption">
<!--Where the ng-Template from Lizenz should be replaced -->
<ng-container *ngTemplateOutlet="CRUDTemplatePluginTableCaption">
</ng-container>
</ng-template>
<ng-template pTemplate="header" let-columns>
<!--HEADER-->
</ng-template>
<ng-template pTemplate="body" let-CRUDItem let-columns="columns">
<!--BODY WITH DATA-->
</ng-template>
</p-table>

ESLint and prettier doesn't like i18n in .ejs files

I'm adding internalization to one of my projects, and facing the issue with eslint, *.ejs and i18n.
<li class="nav-item">
<a class="nav-link" href="/products">
<i class="ni ni-tv-2 text-primary"></i> <%= __('Products')%>
</a>
</li>
gives me the errors:
eslint: error
prettier/prettier - Replace `·__('Products')` with `__('Products');⏎`
eslint: error
no-undef - '__' is not defined.
Trying to find some already existed integrations of eslint with i18n and ejs and no luck yet.
Any recommendations how to fix it?
PS. editor: sublime 3, lang: nodejs

Getting image path from MongoDB using handlebars

I stored the image path in MongoDB but when I'm trying to get the image path into the src attribute of the img tag, it keeps inserting apostrophes at the beginning and the end of the image path.
<img src=“{{ this.img }}” alt="Alt text">
Viewed from Chrome Dev Tools:
<img src="'/img/thisisanimage.jpg'" alt="Alt text">
Any reason why this might be happening?
you should use it like this:
<img src="{{ img.src }}" alt="Image is broken" />

display images in image slider sharepoint site

in my sharepoint home page am using a image slider. so am saved some images in this path C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\images. so in this folder there are some images. but in browser am getting only 2 images. Remaining images are not displaying.Means they are appering as some crashed image. but in folder am able to all the images. but in browser only 2 images(new and mutual) are displaying,other 3.jpg and 1.jpg are not displaying.
<div id="slideshow">
<div class="container">
<div class="row">
<div class="col-md-8 can" >
<div id="featured-slider">
<a href="#">
<img src="../../images/new.jpg" class="img-responsive" alt=""/> </a>
<a href="#">
<img src="../../images/mutual.jpg" class="img-responsive" alt=""/> </a>
<a href="#">
<img src="../../images/3.jpg" class="img-responsive" alt=""/> </a>
<a href="#">
<img src="../../images/1.jpg" class="img-responsive" alt=""/> </a> </div>
</div>
</div>
</div>
</div>
I noticed your tags are missing the closing .
Also, you might try changing the names of 3.jpg and 1.jpg because SharePoint might have trouble with those names in this context.

Resources