react-lazy-load-image-component icon indicating copy to clipboard operation
react-lazy-load-image-component copied to clipboard

Empty inline style

Open golont opened this issue 3 years ago • 1 comments

Empty inline style causes html validator parse error

LazyLoadImage.jsx

style={{
    backgroundImage:
    loaded || !placeholderSrc
	    ? ''
	    : `url(${placeholderSrc})`,
    backgroundSize:
    loaded || !placeholderSrc ? '' : '100% 100%',
    color: 'transparent',
    display: 'inline-block',
    height: height,
    width: width,
}}

I assume better to do something like this

let style = {
    color: 'transparent',
    display: 'inline-block',
  }
  if (!(loaded || !placeholderSrc)) {
    style.backgroundImage = `url(${placeholderSrc})`
    style.backgroundSize = '100% 100%'
  }
  if (width) {
    style.width = width
  }

  if (height) {
    style.height = height
  }
  return (
       <span
          className={
            wrapperClassName +
            ' lazy-load-image-background ' +
            effect +
            loadedClassName
          }
          style={style}
          {...wrapperProps}
        >
          {lazyLoadImage}
        </span>
  )

golont avatar Jan 20 '21 12:01 golont

Hi @golont, thanks for opening this issue. Can you clarify which line is causing an error and what the error is? I tested it with validator.w3.org and I didn't see any errors.

Aljullu avatar Aug 13 '21 19:08 Aljullu

@golont, as we didn't hear back from you for a while, we will go ahead and close this issue. Feel free to reopen it if needed.

jotacodestudio avatar Oct 16 '23 09:10 jotacodestudio