I have a component where I upload image. Then I want to pass it to another component which is in another file. How can I do this? Can you explain with some code?
Can you share your code which uploads an image?
I believe you don't need to pass an image to another component if you know the path/name of an image.
If you need to pass, you can use props.
In first Component:
<AnotherComponent image={pathAndNameOfImageFile} />
In AnotherComponent, you can access image as:
this.props.image
Hope this helps you.
Related
I have an input tag inside a component that uploads a singe image.
<input
type="file"
accept=".png,.jpeg"
onChange={e => dispatch(setProfileImage(e.target.files[0]))}
/>
From what I can see, the image gets saved in the state after I dispatch an action and save it to the state through a reducer.
My problem is this: In another component, I access the image in the state via useSelector and use it as the source in an image tag, but the image appears broken.
Basically, I just want to be able to use the image saved in the state as the source of an image tag.
Any explanation, tutorial, or link be greatly appreciated. I'm trying to avoid using backend as the application I am working on is very small and there is no need for one but am willing to if that's the easiest answer.
Thank you!
create a url for image the put it in src of img tag :
const ImageUrl = URL.createObjectURL(file);
or
<img src={URL.createObjectURL(file)} alt={file.name} />
How can I set a default image for an img tag in case src link is invalid in react?
I've tried using onerror like so, but it doesn't seem to work.
Im using Next.js and hooks.
<img alt="Site Logo" src="/secondary.jpg" onerror="this.onerror=null; this.src='https://static.thenounproject.com/png/140281-200.png';" />
By invalid, I mean when the src receives a URL and it can't find an image I would like to make it display a default image.
When it can't find an image it will display this
Instead of this, I would like to make it display a default image if it can't find the image from the URL provided.
Usually, this can be done with onerror like above but it doesn't work in react for some reason, whats the alternative solution?
I was facing this issue and couldn't find a working solution anywhere, but I was able to understand an easy one. You can simply do this.
First, you can use useState like this and give your intended image.
const [imgSrc, setImgSrc] = useState("Invalid Image Source");
then, in your image component, you can simply do this. (make sure to spell onError correctly)
<img src={imgSrc} onError = {() => setImgSrc("https://picsum.photos/200")} />
in the setImgSrc() give the image you want as the default.
Hope this was helpful!
My Video Footer is not showing up and i don't know anything wrong with it. Pls help me! Thank you so much! This is my codesandbox link: https://codesandbox.io/s/bold-parm-v8jv8?file=/src/Video.js
It seems you dont have anything in your VideoFooter component. You are importing a component that is not created, even in your app component you are not using Video component
??
React first renders App.js and that file needs to render all
You don't export any "videoFooter"
do not name component in camelCase, should be "VideoFooter" instead.
Component name is always start with capital letter.
See the React Doc for more info
you append your App to render at root. but inside App component you didn't include anywhere to your footer component.
See:
https://codesandbox.io/s/interesting-davinci-z1k8h?file=/src/App.js
I wanted to know if i can move the child component from one element to another element without having to recreate the component.
Referring the case in the given attached image.
gif image of behaviour
Is it possible to move the <Components Two/> in <parent one> to <parent two> without running the expensive operations within the <Components Two/> again ? ie not recreating the component again. Would useMemo make sense in here ?
You can try the library https://github.com/Paol-imi/react-reparenting. I have a view navigation use case, currently trying some experimenting with this.
I have an issue with my images in react. When i let the image render like this:
import road from '../../../../assets/images/icons/road.png';
<img src={road} />
It will work but i want it to be dynamic relying on the input of data.
So i tried it this way (where icon is refering to a data set resulting in road):
import road from '../../../../assets/images/icons/road.png';
...
render() {
const { place, date, icon, progress } = this.props.stage;
...
<img src={icon} />
So my guess is that there is an issue with referencing here. From my question you can understand that i am absolutely new to react. What i also noticed is that with the method above i will get an unused var error if i dont load this image. So for example i have a couple of these icons but depending on the data in the dataset it will only render a few. Which i find kind of messy.
I hope you can steer me towards the right direction. Kinda frustrating not being able to implement an image...
With this: Load images based on dynamic path in ReactJs
posted from Subham Khatri i was able to get the answer i desired.
<img src={require(`../../../../assets/images/icons/${icon}.png)`} />
As I understand you are trying to pass the image from this.props.stage. Did you first try console.log(icon). what do you see in the console window. First we need to know whether the data is being passed from props.