Omit undefined attributes from noscript images (#4639)

* Set default noscript width and height to null

To solve issue #4317, this sets the default values of the noscript image's height and width attributes to null. The current default values of "" fail HTML validation because these attributes (if present) must be non-negative integers. Omitting these non-required attributes entirely when no width/height is provided (by setting them to null) solves the validation issue.

* Omit undefined attributes from noscriptImg string output 

This edit checks each prop sent to noscriptImg() to see if it exists before adding the relevant attribute to the `<img>` string.

This prevents attributes with undefined values from being added to the markup as empty strings (e.g. `width=""` and `height=""`), which can cause HTML validation errors in some cases.

The two required `<img>` attributes (`src` and `alt`) are included as empty strings by default. All other attributes are omitted if undefined.

* Fixed typo in comment

* Include opacity and transitionDelay prop values

I accidentally omitted the prop values for opacity and transitionDelay (I only included the default values). 

This edit adds the prop values (if any) back in.

packages/gatsby-image/src/index.js

@@ -88,18 +88,19 @@ const isWebpSupported = () => {
 }
 
 const noscriptImg = props => {
-  const {
-    opacity = `1`,
-    src,
-    srcSet,
-    sizes = ``,
-    title = ``,
-    alt = ``,
-    width = ``,
-    height = ``,
-    transitionDelay = `0.5s`,
-  } = props
-  return `<img width="${width}" height="${height}" src="${src}" srcset="${srcSet}" alt="${alt}" title="${title}" sizes="${sizes}" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/>`
+  // Check if prop exists before adding each attribute to the string output below to prevent
+  // HTML validation issues caused by empty values like width="" and height=""
+  const src = props.src ? `src="${props.src}" ` : `src=""` // required attribute
+  const srcSet = props.srcSet ? `srcset="${props.srcSet}" ` : ``
+  const sizes = props.sizes ? `sizes="${props.sizes}" ` : ``
+  const title = props.title ? `title="${props.title}" ` : ``
+  const alt = props.alt ? `alt="${props.alt}" ` : `alt=""` // required attribute
+  const width = props.width ? `width="${props.width}" ` : ``
+  const height = props.height ? `height="${props.height}" ` : ``
+  const opacity = props.opacity ? props.opacity : `1`
+  const transitionDelay = props.transitionDelay ? props.transitionDelay : `0.5s`
+
+  return `<img ${width}${height}${src}${srcSet}${alt}${title}${sizes}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/>`
 }
 
 const Img = props => {