Medium style image blur load

[UPLukeet]

<ProgressiveImage src={require("../assets/Card-images/" + Image)} placeholder={require("../assets/Card-images-Placeholder/" + Image)}>
                                                {(src, loading) => (
                                                    <img style={{ filter: loading ? blur(8px) : blur(0) }} src={src} alt="projects" />
                                                )}
                                            </ProgressiveImage>

I tried this sort of thing but It didn't seem to work

[UPLukeet]

<ProgressiveImage src={require("../assets/Card-images/" + Image)} placeholder={require("../assets/Card-images-Placeholder/" + Image)}>
                                                {(src, loading) => (
                                                    <img style={{ filter: loading ? "blur(5px)" : "blur(0)" }} src={src} alt="projects" />
                                                )}
                                            </ProgressiveImage>

me being stupid this is how to add a blur effect