I am currently experimenting with using JavaScript's onload and onerror functions to determine if a page or image loads successfully. However, I am facing difficulties in accessing the status variable when trying to assign it to read the status. Additionally, I am exploring the use of promises, as suggested in the provided answers, but I still find myself confused.
const validateInput = (input) => {
const errors = {};
...
if(!(isImgURlValid(input)))
{
errors = `incorrect image URL'`
}
...
return errors;
const isImgURlValid = (path) => {
let img = document.createElement('img');
img.src = path;
let valid
const promise = new Promise(resolve => {
const img = new Image();
img.onload = () => resolve({path, "status": 'ok'});
img.onerror = () => resolve({path, "status": 'error'});
img.src = path;
});
promise.then(function(val) {
console.log(val);
valid = val.status
});
console.log (valid)
}
//using async causes issues with rendering functions
export const renderImgUrlInput = ({ input, label, type, size, required, meta: { touched, error } }) => (
<div className={
cs('form-group', size, {
'has-error': touched && error,
'required-input' : required
})
}>
<label className="control-label" htmlFor={input.name}>{label}</label>
<input {...input} placeholder={required ? 'Required' : ''} className="form-control" />
{touched && error &&
<span className="help-block">{error}</span>
}
{touched && !error &&
<h1 className="help-block">{error} 'Image worked'</h1>
}
</div>
)