HTML中IMG SRC属性的4分钟指南

Images can not only make your digital content more engaging and memorable — they can also make it more shareable. In an analysis of over one million articles, BuzzSumo found thatarticles with an image once every 75-100 words received double the social media sharesas articles with fewer images.

That’s why it’s important to understand how the image element and source attribute work inHTML。当您从头开始构建网站，自定义预设计的模板或在您的网页的源代码中进行修补时，它可能会派上用场。CMS。

让我们仔细看看下面的这对。

Img src HTML

While the HTML image element is used to embed an image in an HTML doc, it doesn’t technically insert the image into the web page. In fact, the image element doesn’t technically do anything on its own. It really just creates a space for the reference to an image.

该引用在源属性中找到。源属性包含图像文件或其URL的路径。这就解释了为什么图像在技术上链接到网页中的图像（未嵌入）。

看看下面的示例。

看到笔Image elements with and without src attribute克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot）上CodePen。

In this example, you can see in the HTML that the first image element has a source attribute that contains a link to Pixabay. The second image element has no source attribute.

The width and height properties are specified in CSS. This is considered a best practice because, if the width and height are not specified, the page might flicker while the image loads.

In the result tab, the first image appears and is 300px by 200px. The second image, however, renders as an empty box with a 300px by 200px outline. That’s because the browser didn’t know what image to render without the source attribute.

Let’s take a closer look at the syntax of the image element and source attribute below.

HTML Img Syntax

The syntax of the image element is:

IMG元素被称为“空元素”，因为它以标签开头，但没有关闭标签。但是，正如您在上面的代码中看到的那样，IMG标签实际上并不为空。

让我们将IMG语法分解为其两个主要组成部分：源属性和ALT属性。

由于它包含了图像文件或其URL的路径，因此需要源属性。这将放置在撇号之间。没有定义的源属性，浏览器将无法找到并渲染图像。

ALT属性提供了有关图像的描述性信息。尽管不像源属性那样必需，但是强烈建议使用ALT属性，因为它对浏览器和读者都重要。

除非包含alt属性，否则无法显示内联图像的浏览器将忽略元素。对于使用屏幕读取器的视觉障碍的读者以及所有读者，如果图像没有加载，此属性也很重要。无论哪种情况，读者仍然能够通过ALT属性来了解图像的意义。

除了改善可访问性以及您网站上的整体用户体验，添加图像alt文本可以改善网站的SEO。

您可以通过阅读更多地了解图像alt文本的重要性Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO。

改变Img src

如果您想替换网站上的图像，则可以简单地更改图像文件路径或源属性中的URL。您可以随时更改此属性。

重要的是要注意，新图像继承了原始图像的高度和宽度属性。因此，如果您希望新图像具有不同的尺寸，则需要指定新的高度和宽度属性。

Img src Not Working

使用图像元素和源属性时，您可能会遇到一些问题。假设您将图像添加到HTML文件中，并查看损坏的链接图标和ALT文本（如下所示）而不是图像。

损坏的链接图标和ALT文本已加载，因为IMG SRC不起作用

Remember that images are not actually embedded into web pages. That means, when a web page loads, the browser has to retrieve the image from a web server and display it on the page. The broken link icon means that the browser could not find the image.

如果您刚刚添加了图像，请检查是否在源属性中包含了正确的图像URL。任何拼写错误或缺失的字母或标点符号都可能导致链接图标损坏。在下面的示例中，我离开了SRC属性的关闭撇号，这导致了前端的链接图标。

看到笔Img src克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot）上CodePen。

如果您以前将图像添加到您的网站上，并且最近注意到它显示了损坏的链接图标，那么这意味着源属性中指定的URL不再正确。也许该图像已从您引用的网页中删除，或者已将其移至网站上的另一个文件夹中，因此文件路径不再正确。您必须跟踪新图像URL或替换它以解决问题。