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.
Related
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!
Hello I am trying to use the react video js player but I am getting the error below:
The media could not be loaded, either because the server or network failed or because the format is not supported.
At first, I thought maybe it was the video type because Initially it was a .mkvi video I then changed to mp4 and still nothing I get the same error can I please get help
Code Below: VideoList.js
import React from 'react';
import VideoPlayer from 'react-video-js-player';
const VideoList = (props) =>{
let videos = props.listVideos
return(
<div>
{videos.map(video =>{
return(
<div key={video.id}>
<h3>{video.lecturer}</h3>
<VideoPlayer src={video.video} width="720" height="420" playbackRates={[0.5, 1, 3.85, 16]}/>
</div>
)
})}
</div>
)
}
export default VideoList
Like I said on my comments, typically this error will occur if the video is not existing, has issues with the encoding, file extension, etc. See this example I've written.
In the end, I was correct and the video.video object was returning a relative path instead of an absolute path which resulted in an incorrect link.
Regarding the OP's current solution for this issue, this is not an ideal architecture because it will probably fail when you deploy to production, switch domains, or even just switch ports. Concantenating your base url is fine (e.g., http://127.0.0.1:8000/) but I would have this variable as a single source of truth probably residing at a state at the topmost component or as an environment variable so that anytime you change domains, ports, or IP you can simply change this variable and you won't have to go through all of your components 1 by 1.
Example implementation on Class based components:
Parent component:
state = {
base_url: `http://127.0.0.1:8000/api/`, // local dev api
// base_url: `https://production-server:80/api/` // live site api
// or an environment variable as described on my answer
}
Child component:
<VideoPlayer src={`${this.props.base_url}${content.video}`}
So I managed to find the problem behind this, so I was getting data from the API but when I tried to access the video the API was not giving the full URL that is:
http://127.0.0.1:8000/media/lectures/<here_the_name_of_the_lecture_video>
But the API was giving me a relative path media/lectures/<here_the_name_of_the_lecture_video>
So I had to give the remaining the URL that which the API does not give when I render in the video i.e I had to write the following
<VideoPlayer src={`http://127.0.0.1:8000/api${content.video}`}
So I am wondering
Currently, this solution works but is this solution technically good? Because I am to believe that the API should be giving everything that I need I just have to make requests.
Can you please assist me to come up with a more technically viable solution for this problem
I am using Typescript and REACT and I want to utilize and wrap some custom html elements in my TSX. For example, I am using a library with a customer html element called ch5-button an it is used in a vanilla html file as such
<ch5-button class="shadow-pulse-button" type="default" shape="circle" label="" iconClass="fas fa-award">
</ch5-button>
I did a ton of searching, but seems like i am not even smart enough to get the search correct to find how to do this. I am not even sure if I have the correct import statement to get those elements -- the closest I got was :
declare var CrComLib: typeof import('#crestron/ch5-crcomlib');
...
const ch5Button = new CrComLib.Ch5Button();
console.log("ch5Button");
console.log(ch5Button);
The console.log display <ch5-button></ch5-button> soI have no idea if I am even on the right track to using this thing. The ch5Button is a class with a lot of methods that look pretty much like what an html element would have but I just dont know what to do with it and how to learn a method for using it. I found some sites that explain how to use observables and such but I am sketchy on if I am heading down the right path. I have attached am image of what some if the properties and methods of the ch5Button looks like in chrome debugger.
Can anyone point me in the right direction? I would create a REACT component that wraps this class and can use props to set the correct attributes etc.
I am very comfortable building REACT apps but admittedly, I am not an advanced developer with it yet but doing my best to learn.
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.
Edit: It seems that the problem was not with the loading part, but it was actually react that didn't like handling so much elements. I will update this post with details as soon as I have a chance to confirm what was happening. My first test JSON was a bunch of duplicated entries (so my file would take some time to load) that triggered some component rendering, I had something like ~40000 entries in my Json. Testing with a new json containing only 3 entries, each with a lot of nested data, so my file is still heavy and takes some time to load, did fix the issue.
I absolutely fail to understand how this is even possible:
I have a json that I'm loading on http://code.pensionsmilitaires.com/codes
During load time, the circle path element is not animated. Just wait for the json to finish loading to see the same ProgressBar animated correctly...
Here is my render function
render() {
console.log("Rendering");
if (this.state.codes.length < 1) {
return (
<ProgressBar type="circular" mode="indeterminate" multicolor/>
);
}
return (
<div>
<ProgressBar type="circular" mode="indeterminate" multicolor/>
<h2>Liste des codes disponibles</h2>
<div>
{this.state.codes.map((code, i) => (
<CodeSummary key={i} code={code}/>
))}
</div>
</div>
);
}
If anyone has an idea on how I can fix this, that would be awesome!
Thanks for reading my question anyway ^^
So a few years later, just for the sake of making sure anyone having the same kind of issue gets an answer.
React was actually being busy rendering thousands of elements, which froze the JavaScript based animation of the svg path-offset until React freed the thread.
As a result, the circular progress bar was not animating until React was done rendering.
In such cases where you have to render tons of things, windowing, or virtualizing a long list and React concurrent mode can be helpful