class ProductComponent extends Component {
render() {
var url = 'http://via.placeholder.com/150x150';
return (
<div>
<figure><img src={url} alt=""/></figure>
<div className="prod-dtl">
<span><img src={canada_logo} alt=""/> Williamsburg tote bag iPhone America…</span>
<h3>$15.00 <em>$ 25.00</em></h3>
<button className="add-btn">+</button>
</div>
</div>
);
}}
Above is my code let's say i'm getting images from APIs.
I have used create-react-app for creating app, now problem is when i'm opening my project in web view it is showing properly.
But from chrome console when i choose device like nexus 6 or iphone 6 whatever any device. image url will converted from
http://via.placeholder.com/150x150 => http://via#2x.placeholder.com/150x150
Automatically please help with these i need image to be fix nothing to append.
I havn't find any solution so i came across pure jQuery string replace, Once page fully loaded will remove #2x and #3x from image src.
$(document).ready(function () {
setTimeout(function () {
$('body img').prop('src', function (_, src) {
src = src.replace(/#2x\./, '.'); // strip if it's already there
src = src.replace(/#3x\./, '.'); // strip if it's already there
return src.replace(/(\.\w+$)/, '$1');
});
}, 0);
});
Hope this will help someone needed. Peace out:)
Related
I want to create a simple player and remove some of the ui elements from the vimeo player, but whatever I try it doesn't work...
I have this code to load the data. At the "videoUrl" I set the params, but with no effect
But according to their documentary it should go
https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters
<template>
// <img :src="data.thumbnail_url" alt="" #click="startVideo"/>
<div v-html="data.html" />
</template>
<script>
mounted() {
const videoUrl = `https://player.vimeo.com/video/${this.video_id}?
title=0&
byline=0&
portrait=0`
const requestUrl = `https://vimeo.com/api/oembed.json?url=${videoUrl}`
this.$axios.get(requestUrl).then((response) => {
this.data = response.data
// I also tried to create the iFrame by myself and set the params again in the src but also without any effect.
this.createIframe()
})
},
</script>
createIframe () {
const el_iframe = document.createElement('iframe')
el_iframe.setAttribute('src', `
https://player.vimeo.com/video/${this.video_id}?
title=0&
byline=0&
portrait=0
`)
}
this.$el.appendChild(el_iframe)
}
I also upgraded to a Pro account in case some of these customizations are only possible within that plan.
What I'm missing?
To set this attributes the video owner have to check this toggle button
and if you like to write the attributes in a list style, the ampersand must be in front of the attribute and the question mark in the same line with the the video-id
this.el_iframe.setAttribute('src',
`https://player.vimeo.com/video/${this.video_id}?
title=0
&byline=0
&portrait=0
`)
I am trying to get a value from the current page by using the pageContext but I am getting either undefined or 404.
This is the situation:
In the Site pages library there are several news pages. Each news page has some tags attached to them. This tags lives in a custom column in the Site Pages library.
There are news that have 1 tag and other several tags. It can be the situation where two or more news share the same tag(s).
The goal is when I open a news page the tags that are attached to that news are also visible.
Until now I am using #pnp/pnpjs and the code looks like this:
var result: any = await sp.web.lists.getByTitle("Site Pages")
.items.getById(15)
.select("Tags")
.get();
return await result.Tags;
And it is giving me 404 error
I also tried this one:
this.context.pageContext.list('Site Pages').listItem['Tags'].get().then((items: any[]) => {
console.log(items);
});
But it giving me Cannot read property 'list' of undefined
Du you have an idea how can get the value of the Tags column asociated with the current news?
Here is an update
Now I am getting the right tag. The question now is how to show it in the screen?
import * as React from 'react';
import styles from './ReadTags.module.scss';
import { IReadTagsProps } from './IReadTagsProps';
import { sp } from '#pnp/pnpjs';
export default class ReadTags extends React.Component<IReadTagsProps, {}> {
constructor(props: IReadTagsProps) {
super(props);
}
private async getTags() {
var id = this.props.context.pageContext.listItem.id;
var result: any = await sp.web.lists.getByTitle("Site Pages")
.items.getById(id)
.select("Tags")
.get();
return await result.Tags;
}
public render(): React.ReactElement<IReadTagsProps> {
console.log(this.getTags());
return (
<div className={ styles.readTags }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
</div>
</div>
</div>
</div>
);
}
}
Regards
Amerco
What you'll probably want to do is store your tags in the state of your component. Then you can show these (if the value from state is not empty) during your render. I can highly recommend working through the React tutorial to understand React lifecycle and state/props.
https://reactjs.org/tutorial/tutorial.html
https://reactjs.org/docs/state-and-lifecycle.html
Something with getting your data in componentDidMount, storing it in the state by using this.setState and then running through them in render with this.state.tags. It's more of a React question then a SPFx question :)
There's a ton of samples here with SPFx and React:
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples
I want to add an image with a require statement.
But I got the following error:
Cannot find module '../../../assets/skillName.png'
I build app using parcel-bundle and I don't use webpack.
The path to the image is correct, because if I use a static link, it works well:
<img src={require(`../../../assets/skillName.png`)}/>
Try doing it this way:
{Object.keys(this.props.skillset).map((skill) => {
let source = require(`../../../assets/${skill}.png`);
return (
<div key={skill}>
<img src={source}/>
</div>
)
})}
https://codepen.io/smilesaayush/pen/oyzMZd
I did it this way and it worked for me, try not using require, and give absolute url in image source, which I think in your case should be - window.location.host + relative url.
class App extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
{[100, 200].map((len) => {
return (
<div key={len}>
<img src={`https://placeimg.com/${len}/${len}/any`}/>
</div>
)}
)}
</div>
)
}
}
you can control the steps:
1.really skillName.png image place the assets folder.
2.You can remove skillName name from json data.then see other images.if you can show other image, your image name is incorrect.
because your code is correct but can be small problem.
I want to display images in a list which are fetched from firebase database and firebase storage. Following is my code, when I run it browser got unresponsive. Please help me to fix this.
HTML:
<div class="w3-panel" *ngFor="let item of items;">
<img [src]="getImage(image.imageUrl)"/>
</div>
JS : my.component.ts
// imageUrl = question/1/ch1/image.jpg // sample imageUrl format
getImage(imageUrl){
return new Promise((resolve,reject) =>{
this.storage.ref(imageUrl).getDownloadURL().then(url => {
resolve(url);
})
});
}
I'd like to use bootstrap's carousel to dynamically scroll through content (for example, search results). So, I don't know how many pages of content there will be, and I don't want to fetch a subsequent page unless the user clicks on the next button.
I looked at this question: Carousel with dynamic content, but I don't think the answer applies because it appears to suggest loading all content (images in that case) from a DB server side and returns everything as static content.
My best guess is to intercept the click event on the button press, make the ajax call for the next page of search results, dynamically update the page when the ajax call returns, then generate a slide event for the carousel. But none of this is really discussed or documented on the bootstrap pages. Any ideas welcome.
If you (or anyone else) is still looking for a solution on this, I will share the solution I discovered for loading content via AJAX into the Bootstrap Carousel..
The solution turned out to be a little tricky since there is no way to easily determine the current slide of the carousel. With some data attributes I was able to handle the .slid event (as you suggested) and then load content from another url using jQuery $.load()..
$('#myCarousel').carousel({
interval:false // remove interval for manual sliding
});
// when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
var url = $('.item.active').data('url');
// ajax load from data-url
$('.item').html("wait...");
$('.item').load(url,function(result){
$('#myCarousel').carousel(idx);
});
});
// load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){
$('#myCarousel').carousel(0);
});
Demo on Bootply
I combined #Zim's answer with Bootstrap 4. I hope it will help someone.
First, load just the path of the images:
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" data-url="/image/1.png"></div>
<div class="carousel-item" data-url="/image/2.png"></div>
<div class="carousel-item" data-url="/image/3.png"></div>
</div>
</div>
Then in JavaScript:
$('document').ready(function () {
const loadCarouselImage = function ($el) {
let url = $el.data('url');
$el.html(function () {
let $img = $('<img />', {
'src': url
});
$img.addClass('d-block w-100');
return $img;
});
);
const init = function () {
let $firstCarousel = $('#carousel .carousel-item:first');
loadCarouselImage($firstCarousel);
$firstCarousel.addClass('active');
$('#productsCarousel').carousel({
interval: 5000
});
};
$('#carousel').on('slid.bs.carousel', function () {
loadCarouselImage($('#carousel .carousel-item.active'));
});
init();
});