I'm attempting to bind a background image from an external data source through Vue.js. This is what the code looks like:
<div class="image-box border"
:style="{ background: `url(`+ item.image +`) no-repeat center` }"
style="width: 220px; height: 220px">
I've also tried this:
<div class="image-box border"
:style="{ 'backgroundImage': 'url(' + item.image + ')' }">
This is what the url reads like in the app with no error:
background-image: url("http://localhost:8080/assets/images/shoe-1.png");
Any help is appreciated!
Full code:
component -
<template>
<div class="product-card-box border">
<div class="image-box border"
:style="{ background: `url(`+ item.image +`) no-repeat center` }"
style="width: 220px; height: 220px">
<!-- :style="{ 'backgroundImage': 'url(' + item.image + ')' }"> -->
</div>
<div class="info-box border">
<div class="color-info product-info bold">{{item.colors.length}} color</div>
<div class="product-name">
<div class="product-info bold">{{item.name}}</div>
<div class="product-info sub-info">{{item.gender}}'s Shoe</div>
</div>
<div class="product-price">
<div class="product-info sub-info">${{item.price}}</div>
</div>
</div>
</div>
</template>
data -
const data = [
{
name: 'SNKR 001',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 002',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
}
];
export default data;
In data[], use require(path) so that the path is correctly resolved in your template:
image: require('../assets/images/shoe-1.png')
Consider just having one style object. Also, does it have to be a background image? I'm sure you could accomplish the same thing with an img and a class and just making it object-fit.
<div id="app">
<div :style="{
width: '200px',
height: '200px',
'background-image': `url(${backgroundImage}`,
}"/>
</div>
new Vue({
el: "#app",
data: {
backgroundImage: 'http://picsum.photos/g/1200/400?image=30',
},
})
Check this fiddle for the object-fit solution https://jsfiddle.net/caseyjoneal/b5r8fvjq/73/
Related
<div id="apc" style="overflow: hidden">
<div class="ee" style="text-align: center; font-family: 'Scheherazade New', serif;"> <canvas id="input-canvas" :width="canvasStyle.width" :height="canvasStyle.height" v-show="false"> </canvas> <canvas id="watermark"> </canvas> <img :src="imgSrc" />
form: {
message: 'my text',
img: new Image,
local_img: null,
font_family: 'Scheherazade New',
font_size: '55',
color: 'rgba(2, 9, 1, 9.3',
position_x: '90',
position_y: '280',
rotate_deg: '-30',
real_size: true,
freeze_ratio: true,
tile_flag: false,
real_tile_flag: false,
watermark_width: '300',
watermark_height: '100',
},
i'm using table pagination template to make a pagination over cards. the pagination seems working but data isn't loaded.
This is my html component : If i change my datasource2 inside ngFor, the data is loaded but with no pagination rules.
<mat-card *ngFor="let item of dataSource2" >
<!--cart header-->
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title > <a href="" > {{item.title}} </a> </mat-card-title>
<mat-card-subtitle > {{item.subtitle}} </mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{ item.imgsrc }}" alt="Photo of a Shiba Inu" >
<mat-card-content> <p> {{item.content}} </p> </mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
the component ts :
export class CardsComponent implements AfterViewInit {
displayedColumns: string[] = ['position', 'title', 'subtitle', 'content','imgsrc'];
dataSource2 = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
#ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource2.paginator = this.paginator;
}
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, title: 'Shiba Inu Yes', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
{position: 2, title: 'Shiba Inu', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
{position: 3, title: 'Shiba Inu', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
{position: 4, title: 'Shiba Inu', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
{position: 5, title: 'Shiba Inu', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
{position: 6, title: 'Shiba Inu', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
{position: 7, title: 'Shiba Inu', subtitle:'Dog Breed',content:'The Shiba Inu is the smallest' , imgsrc:'https://material.angular.io/assets/img/examples/shiba2.jpg'},
];
export interface PeriodicElement {
position: number;
title: string;
subtitle: string;
content: string;
imgsrc: string;
}
I have an array in which i am trying to introduce a line break every fourth element of array, so that every four elements are together while next line will contain next 4 elements and so on.
this.state.colors: ['red', 'brown', 'yellow', 'blue', 'black', 'pink', 'green', 'aliceblue',
'gray', 'magenta', 'orange', 'violet','coral', 'white', 'olive', 'lightgreen']
<ul className="colorsList">
{this.state.colors.map((color, index) => (
<div>
<div className="flex">
<div style={{ background: color, height: 20, width: 20 }}></div>
</div>
{(index === 3 || 7 || 11) && <br></br>}
</div>
))}
</ul>
Should look like..
[][][][]
[][][][]
[][][][]
here brackets indicate these color boxes with 20, 20 height and width.
I think you could use this condition
index % 4 === 0 ? return : do your work
so the result will be =>
<ul className="colorsList">
{this.state.colors.map((color, index) => (
<div>
<div className="flex">
<div style={{ background: color, height: 20, width: 20 }}></div>
</div>
{(index % 4 === 0 && <br />)}
</div>
))}
</ul>
I didnot want to involve javascript for this problem i came accross and wanted to do it with pure CSS. Here is my solution :)
this.state.colors: ['red', 'brown', 'yellow', 'blue', 'black', 'pink', 'green', 'aliceblue',
'gray', 'magenta', 'orange', 'violet','coral', 'white', 'olive', 'lightgreen']
<ul className="colorsList">
{this.state.colors.map((color, index) => (
<div>
{(index % 4 === 0 ) ?
<div>
<div style={{ clear: 'both' }}></div>
<div style={{ background: color, height: 20, width: 20, float: 'left' }}></div>
</div>
:
<div style={{ background: color, height: 20, width: 20, float: 'left' }}></div>
}
</div>
))}
</ul>
I have the package "recharts" (latest version 1.5.0) from npm installed and properly loaded with data on my react project.
Data lines and chart are always active. I need all the "activeDots" to always be active rather than active only when hovering over data points.
<LineChart
width={240}
height={180}
data={data}
margin={{top: 15, right: 10, left: 10}}
>
<CartesianGrid horizontal={false} />
<XAxis
dataKey="x"
stroke="rgba(0,0,0,0.4)"
strokeWidth=".4"
scale="time"
type="number"
domain={['auto', 'auto']}
tick={{fontSize: 12}}
tickFormatter = {(unixTime) => moment(unixTime).format('MMM D')}
/>
<YAxis hide={true} />
<Tooltip content={<CustomTooltip/>}/>
<Line
connectNulls={false}
type="linear"
dataKey="pv"
stroke="#3F99F7"
strokeWidth="3"
activeDot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 3, r: 11, className: "boxShadow" }}
dot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 2, r: 7, className: "boxShadow" }}
/>
</LineChart>
not hovering over data points:
hovering over data point:
This looks about like what you want (the purple line):
const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
{name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
{name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const SimpleLineChart = React.createClass({
render () {
return (
<LineChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line
type="monotone"
dataKey="pv"
stroke="#8884d8"
activeDot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 3, r: 11, className: "boxShadow" }}
dot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 2, r: 7, className: "boxShadow" }}
/>
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
);
}
})
ReactDOM.render(
<SimpleLineChart />,
document.getElementById('container')
);
body {
margin: 0;
}
#container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 800px;
height: 800px;
background-color: #fff;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script type="text/javascript" src="https://npmcdn.com/react#15.6.2/dist/react-with-addons.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/react-dom#15.6.2/dist/react-dom.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Which is the same code more or less that you have in your example, which leads me to believe there may be something more going on in your code that you haven't located.
I'm creating an ionic app where on a page i want to display a widget but unable to (I'm not sure where and how to add the snippet).
Below is the code for widget and here is the link https://www.tradingview.com/widget/market-movers/.
Can anyone please tell me how to add such embedded widgets in angular or ionic pages?
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">Stock Market</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js" async>
{
"exchange": "BSE",
"showChart": true,
"locale": "in",
"largeChartUrl": "",
"width": "400",
"height": "600",
"plotLineColorGrowing": "rgba(60, 188, 152, 1)",
"plotLineColorFalling": "rgba(255, 74, 104, 1)",
"gridLineColor": "rgba(242, 243, 245, 1)",
"scaleFontColor": "rgba(214, 216, 224, 1)",
"belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
"belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
"symbolActiveColor": "rgba(242, 250, 254, 1)"
}
</script>
</div>
<!-- TradingView Widget END -->
Here is how I have done in my ionic app.
Create an ionic page. In component typescript file, add following code
import { Component, OnInit } from '#angular/core';
declare var TradingView;
#Component({
selector: 'app-stock-price',
templateUrl: './stock-price.page.html',
styleUrls: ['./stock-price.page.scss'],
})
export class StockPricePage implements OnInit {
periods = ['1M', '3M', '1Y', '5Y', 'All'];
stockChart: any;
constructor() { }
ngOnInit() {
this.createStockPriceWidget();
}
createStockPriceWidget() {
this.stockChart = new TradingView.MediumWidget(
{
container_id: 'tv-medium-widget',
symbols: [
[
'NASDAQ',
'AAPL'
],
],
interval: '3M',
greyText: 'Quotes by',
exchange: 'CSE',
gridLineColor: '#e9e9ea',
fontColor: '#83888D',
underLineColor: '#dbeffb',
trendLineColor: '#4bafe9',
width: '100%',
height: '100%',
locale: 'en',
}
);
}
}
In HTML file,
<ion-header>
<ion-toolbar>
<ion-title>Stock information</ion-title>
<ion-buttons slot="start">
<ion-menu-button>
<ion-icon color="light" removeSvgStroke src="./assets/icons/menu.svg"></ion-icon>
</ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="tradingview-widget-container">
<div id="tv-medium-widget"></div>
<div class="tradingview-widget-copyright">
<a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank">
<span class="blue-text">Apple Quotes</span>
</a> by TradingView</div>
</div>
</ion-content>
in scss file,
.stock-segment {
ion-segment-button {
min-width: 40px;
font-weight: normal;
}
}
.stock-price-chart {
margin-top: 30px;
}
Finally in Index.html file, after <app-root></app-root> , refer the js file as below
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>