docs: add missing word for alt tag

[muescha]

Description

changed:

• changed in readme filename to my-awesome-image.png
• changed in readme the generated alt tag to match the file name
• fixed in docs the generated alt tag to match the file name (in line 67 - not visible in diff)

because the default alt description is generated from file name (defaultAlt):

gatsby/packages/gatsby-remark-images/src/index.js

Lines 167 to 178 in 3d100e3

	// Generate default alt tag
	const srcSplit = getImageInfo(node.url).url.split(`/`)
	const fileName = srcSplit[srcSplit.length - 1]
	const fileNameNoExt = fileName.replace(/\.[^/.]+$/, ``)
	const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/gi, ` `)
	const isEmptyAlt = node.alt === EMPTY_ALT
	const alt = isEmptyAlt
	? ``
	: _.escape(
	overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt
	)

Documentation

Related Issues

• fix(gatsby-remark-images): enable creating img tag with empty alt attribute #27218 fix(gatsby-remark-images): enable creating img tag with empty alt attribute

[muescha]

should and info added about an empty []?

By default, the text `my awesome image` will be used as 
-the alt attribute of the generated `img` tag.
+the alt attribute of the generated `img` tag if it is empty: `![](./my-awesome-image.png)`

there are 3 possible situations

![Alt text here](./my-awesome-image.png)    => alt="Alt text here"
![](./my-awesome-image.png)                 => alt="my awesome image"
![GATSBY_EMPTY_ALT](./my-awesome-image.png) => alt=""

[LekoArts]

Hi!

The changes you made are incorrect. You can check this with the tests:

gatsby/packages/gatsby-remark-images/src/__tests__/index.js

Lines 675 to 711 in ef12dca

	describe(`image alt attribute`, () => {
	it(`should be generated correctly`, async () => {
	const imagePath = `images/my-image.jpeg`
	const content = ``
	const nodes = await plugin(createPluginOptions(content, imagePath))
	expect(nodes.length).toBe(1)
	const node = nodes.pop()
	const $ = cheerio.load(node.value)
	expect($(`img`).attr(`alt`)).toEqual(`testing-if-alt-is-correct`)
	})
	it(`should use escaped filename as fallback`, async () => {
	const imagePath = `images/my-image.jpeg`
	const content = ``
	const nodes = await plugin(createPluginOptions(content, imagePath))
	expect(nodes.length).toBe(1)
	const node = nodes.pop()
	const $ = cheerio.load(node.value)
	expect($(`img`).attr(`alt`)).toEqual(`my image`)
	})
	it(`should be able to consider EMPTY_ALT`, async () => {
	const imagePath = `images/my-image.jpeg`
	const content = ``
	const nodes = await plugin(createPluginOptions(content, imagePath))
	expect(nodes.length).toBe(1)
	const node = nodes.pop()
	const $ = cheerio.load(node.value)
	expect($(`img`).attr(`alt`)).toEqual(``)
	})
	})

This here means:

gatsby/packages/gatsby-remark-images/src/index.js

Lines 174 to 178 in ef12dca

	const alt = isEmptyAlt
	? ``
	: _.escape(
	overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt
	)

• If the override for empty alt is given, return ''
• If overWrites.alt is given, use that
• If overWrites.alt is not given, check if node.alt (coming from the [desc here]) exists and use it
• Otherwise use defaultAlt

[muescha]

yes - you are right