This article will demonstrate the approaches to check if an img src is empty in JavaScript
How to Check if an img src is Empty Using JavaScript?
To check if an img src is empty using JavaScript, the following approaches in combination with the “getAttribute()” method can be utilized:
- “logical operator(!)”.
- “null” datatype.
Let’s discuss each of the approaches one by one!
Approach 1: Check if an img src is Empty in JavaScript Using logical operator(!)
The “getAttribute()” method gives the value of an element’s attribute. Whereas the “logical” operators are used to analyze the logic between the variables or values. More specifically, the “logical not(!)” operator can be utilized to check if a particular attribute is included or empty in an element.
Syntax
In the given syntax:
- “name” refers to the attribute’s name.
Example 1: Check for a Single src Attribute in an Image
In this example, a specific attribute, i.e., src, will be checked for the stated requirement:
<script type="text/javascript">
let get = document.getElementById('img');
let getAttr = img.getAttribute('src');
if (!getAttr) {
console.log('The img src is empty');
}
else {
console.log('The img src is not empty');
}
</script>
In the above lines of code:
- Firstly, specify the “<img>” element having the stated “id”.
- In the JS code, access the specified image element by its “id” using the “getElementById()” method.
- In the next step, apply the “getAttribute()” method specifying the attribute “src” as its parameter, which will be checked for the stated requirement.
- After that, apply the “if-else” condition such that the former statement specified in the “if” condition is displayed upon the “src” attribute being empty in the fetched image.
- In the other scenario, the “else” condition will be executed.
Output
In the above output, it can be observed that the “src” attribute in the image is empty.
Example 2: Check for Multiple src Attributes in the Images
In this example, two images having empty and non-empty “src” attributes will be checked:
<br><br>
<img src="template4.PNG" id = image2>
<script type="text/javascript">
let get = document.getElementById('image1');
let get1 = document.getElementById('image2');
let getAttr = get.getAttribute('src');
let getAttr1 = get1.getAttribute('src');
if (!getAttr && !getAttr1) {
console.log('Either of the image srcs is empty');
}
else {
console.log('The img src is not empty');
}
</script>
Apply the following steps in the above code snippet:
- Firstly, specify the “<img>” element having the stated “id” as its attribute.
- Likewise, include another “<img>” element having the “src” and “id” attributes, respectively.
- In the JavaScript code, access both included images by their “ids” in the “getElementById()” method.
- After that, apply the “getAttribute()” method upon each of the fetched images to locate the “src” attribute.
- Now, apply the condition to check that if the “src” attribute is not contained in both images, the former statement is displayed with the help of the “&&” operator.
- In the other scenario, the “else” condition executes.
Output
It can be seen that the “src” attribute in both images is not empty as specified by the message on the console.
Approach 2: Check if a src in an img is Empty in JavaScript Using Null DataType.
The “null” data type denotes a null value. This data type can be utilized in combination with the “getAttribute()” method and the “equality(==)” operator to check for the stated requirement by allocating the value null to the “src” attribute and verifying it.
Example
The following example illustrates the stated concept:
<script type="text/javascript">
let get = document.getElementById('image');
let getAttr = get.getAttribute('src');
if (getAttr == null) {
console.log('The img src is empty');
}
else {
console.log('The img src is not empty');
}
</script>
Now, implement the following steps in the above code snippet:
- Recall the discussed approaches for including the “<img>” element and fetching it via the “getElementById()” method.
- After that, likewise, access the “src” attribute from the fetched image using the “getAttribute()” method.
- In the next step, check if the src attribute in the image is empty with the help of the “null” value.
- In case, if the added condition is satisfied, the code added in the “if” block will be executed. In the other scenario, similarly, the “else” condition will come into effect.
Output
The above output signifies that the stated requirement is fulfilled.
Conclusion
The “getAttribute()” method in combination with the “logical” operator(!) or the “null” data type can be used to check if an img src is empty in JavaScript. The former approach can be implemented to check for the “src” attribute directly upon single and multiple images. The latter approach can be applied to perform the desired requirement by assigning a “null” value to the fetched attribute and confirming it. This blog explains how to check if a src in an img is empty using JavaScript.
