I want to upload multiples images then display them in browser. I wrote this code mentioned by this link.
I got the name of images displayed in place of images:
Image1.png
Image2.png
How can I fix that and if someone knows another npm module which upload and display images as a gallery I will be grateful if mentioned it to me.
Adding the property withPreview to the <ImageUploader /> gives you a preview of all "uploaded" images.
const UploadImage = props => {
const { onDrop } = props;
return (
<ImageUploader
withIcon
buttonText="Upload Image"
onChange={onDrop}
imgExtension={[".jpg", ".gif", ".png", ".gif"]}
maxFileSize={5242880}
withPreview
/>
);
};
You can see this change implemented here.
This library looks like it can achieve what you want right out the box. See the documentation for the library for more details.
Related
I am having an issue where I can't seem to be able to display the pokemon images on my react front end, this is the api: https://pokeapi.co/
import React, { Component } from 'react';
class Card extends Component {
state = {
name: "",
imageUrl: "",
pokemonIndex: "",
}
componentDidMount() {
const {name, url} = this.props;
const pokemonIndex = url.split('/')[url.split('/').length - 2];
const imageUrl = `http://pokeapi.co/media/sprites/pokemon/${pokemonIndex}.png`
this.setState({name, imageUrl, pokemonIndex})
}
render() {
return (
<div className="card" >
<img src= {this.state.imageUrl}/>
<h3> {this.state.name} </h3>
</div>
);
}
}
export default Card;
I have also attached a screenshot of the front end.
Looking at the documentation and JSON file from API, I think I found your problem. You are using the wrong img link. The correct format is: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png
For exemple:
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png" />
#erick-silva answer is not complete and prone to error.
The correct way to fetch an image for a specific pokemon is:
Fetch from PokeAPI the info for that pokemon, say bulbasaur. -> GET https://pokeapi.co/api/v2/pokemon/bulbasaur
Parse the returned JSON for the property .sprites, select the version we'd like to use and the variety for the sprite, say Pokemon Crystal front: .sprites.versions["generation-ii"].crystal.front_default
Use the provided link and load the image: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/1.png
Using this method will ensure that you will always fetch the correct image in case the ids change or the name of the image isn't the id of the pokemon.
For pokeapi the correct URI format is as follows.
https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/imageName.png
Currently pokemon images are not loaded as there are deleted from it's github repo.
You can find the real location of the images inside sprites folder in PokeAPI GitHub.
To get the image, there is a workaround,
https://unpkg.com/pokeapi-sprites#2.0.2/sprites/pokemon/other/dream-world/1.svg
here 1.svg should be replaced by the pokemon's id
You can find more info here
I'm using Gatsbyjs image in my react website I tried adding fallback to jpg using the picture tag but its not working, it's just loading the jpg file here is the code
<Box {...portfolioImage}>
<picture>
<source
srcset={
(portfolioItem.image !== null) | undefined
? portfolioItem.image.childImageSharp.fluid
: {}
}
type="image/webp"
alt={`PortfolioImage-${index + 1}`}
/>
<Image
fluid={
(portfolioItem.imageFallback !== null) |
undefined
? portfolioItem.imageFallback
.childImageSharp.fluid
: {}
}
alt={`PortfolioImage-${index + 1}`}
/>
</picture>
</Box>
The data
image {
childImageSharp {
fluid(quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
imageFallback {
childImageSharp {
fluid(quality: 100) {
...GatsbyImageSharpFluid
}
}
}
The Gatsby image is a component itself, not a data to be placed inside a srcSet attribute. In your case, you should render one component or another based on the portfolioItem.image.childImageSharp.fluid data, depending on if exist or not. In addition, those ternary conditions seem odd to me.
Assuming that your GraphQL queries work as expected and are retrieving the data. I would suggest simplier like:
{portfolioItem.imageFallback.childImageSharp.fluid
? <Image fluid={portfolioItem.imageFallback.childImageSharp.fluid} alt={`PortfolioImage-${index + 1}`} />
: <picture><source srcSet={portfolioItem.imageFallback} alt={`PortfolioImage-${index + 1}`} /></picture>
}
With the snippet above you simply render the <Image> (from Gatsby image) if the data exist or the <picture> fallback image if not.
Wrapping the Gatsby Image inside a <picture> tag is not as useful as you may think since inside the image component will be a bunch of nested <div>s with the own JavaScripts fallbacks and blurs. This will change the default children of your <picture> tag causing potential issues or layout bugs.
Check for data is not the point, I set the data I need to check if the
browser supports webp image format which is what the picture tag is
supposed to do but it seems not to be working with dynamic images or
images that are loaded from JSON/grahql
Gatsby Image handles it automatically. From their documentation:
If you want to automatically use WebP images when the browser supports
the file format, use the withWebp fragments. If the browser doesn’t
support WebP, gatsby-image will fall back to the default image format.
need to test this again but pretty it did not work on safari
There's a known bug in Safari (or MacOS devices) with triggering of the intersection observer. To polyfill it:
yarn add intersection-observer
In your gatsby-browser.js:
export const onClientEntry = async () => {
if (typeof IntersectionObserver === "undefined") {
await import("intersection-observer");
console.log("IntersectionObserver polyfilled ;)");
}
};
I have used a react-video component in my reactjs web application and it's working with a default source link, but when I'm using my video as a source, nothing happens.
I have searched a lot, read the documentation about react-video component, but could not solve the problem.
import {Player} from 'video-react';
<div className = 'video-container'>
<Player
playsInline
fluid={false}
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
width={600}
height={300}/>
</div>
I expect the new source to be working without any issues, but it never starts playing.
#Dato.Beriashvili, I have faced similar issues in default html video API, whenever i change src by anymeans video was not updated. so i have done below which fixed my issue.
useEffect(() => {
const myVideo= innerDoc.querySelector('#videoPlayer');
const mySource = innerDoc.querySelector('#source');
if (mySource && myVideo) {
mySource.setAttribute('src', videoUrl);
myVideo.load();
}
}, [videoUrl]);
whenever url changed, i'm manually loading it.
I am new at react and I am creating an upload images functionality using this: https://github.com/JakeHartnell/react-images-upload as a guide.
however i am having issues with the set state, it adds the file even if i removed it from the upload
As you can see in the screenshot, i have added two photos, removed one and added one again. when i checked the state. it has 6 files in the array. how do i fix this one?
this is my onchange function:
onDrop = picture => {
this.setState({
artistGallery: this.state.artistGallery.concat(picture),
});
};
i am calling it here:
<ImageUploader
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
withPreview={true}
/>
Your 'onDrop' function is getting called on 'add' as well as on 'remove' action. And you are concatinating the image files entries in onDrop thats why images entries are duplicated on each call.
In your case assuming 'picture' is the array of images, Change your onDrop function to this:
onDrop = picture => {
this.setState({
artistGallery: picture
});
};
Please note: I have tried this using the link you have provided in your question with react-images-upload.
Hope it helps!
P.S. I have raised a pull request on the source you have used.
I am building a dashboard that links to various servers using ReactJS and electron. Now in a page I have a button and when it is clicked it renders a "webview" in the application using tag but i do not get the whole page as it needs some additional headers like langauge. I saw in the official documentation here https://electron.atom.io/docs/api/webview-tag/ that for using webview methods we first have to load the webview element but I tried all the possibilities that I had in my mind but couldnt come up with a solution.
Please if anyone can let me know where and how should I load the webview element and how to use the webview methods inside the component, really appreciated.
Thanks.
Keep the ref of webview and initially don't load any url
<WebView autosize={true} ref={(input) => { this.webview = input; }} src="data:text/plain" />
in your componentDidUpdate() load url with extra headers
if (this.webview) {
this.webview.loadUrl(url, {
extraHeaders: ""
});
}