Skip to content
- Tutorials
- Python Tutorial
- Taking Input in Python
- Python Operators
- Python Data Types
- Python Loops and Control Flow
- Python Functions
- Python OOPS Concept
- Python Data Structures
- Python Exception Handling
- Python File Handling
- Python Exercises
- Java
- Java Programming Language
- Java Collections
- Java 8 Tutorial
- Java Programs
- Java Interview Questions
- Java Exercises
- Java Quiz
- Java Projects
- Advance Java
- Programming Languages
- System Design
- Interview Corner
- Computer Science Subjects
- DevOps
- Linux
- Software Testing
- Databases
- Android
- Excel
- Mathematics
- Python Tutorial
- DSA
- Data Structures
- Algorithms
- Analysis of Algorithms
- Searching Algorithms
- Sorting Algorithms
- Greedy Algorithms
- Dynamic Programming
- Graph Algorithms
- Pattern Searching
- Recursion
- Backtracking
- Divide and Conquer
- Mathematical Algorithms
- Geometric Algorithms
- Bitwise Algorithms
- Randomized Algorithms
- Branch and Bound
- Algorithms Tutorial
- DSA Tutorial
- Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- Language Wise Coding Practice
- Curated DSA Lists
- Competitive Programming
- Company Wise SDE Sheets
- DSA Cheat Sheets
- Top Interview Questions
- Puzzles
- Data Science
- Web Tech
- Courses
-
Last Updated : 12 Jan, 2024
Summarize
Comments
Improve
The<img> src attributeis used tospecify the URL of the source image.It points to the location of the image file that the browser should display on the webpage.
Syntax:
<img src="URL">Attribute Values:
It contains a single-value URL that specifies the link to the source image. There are two types of URL links which are listed below:
Attribute Values
Description
Absolute URL
It points to another webpage.
Relative URL
It points to other files on the same web page.
Example:This example illustrates the use of the image src attribute with an HTML document.
html
<!DOCTYPE html><html>See AlsoA 4-Minute Guide to the Img src Attribute in HTMLHow to set src to the img tag in html from the system drive?How to fix images not being displayed on a website | Hostinger Help CenterHow to Work with Images in HTML – A Beginner's Guide<head><title>img src Attribute</title></head><body><h1>GeeksforGeeks</h1><h2>HTML <img> src Attribute</h2><imgsrc=alt="GeeksforGeeks logo"></body></html>Output:
Related DOM Property:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Safari 15
- Opera 1
Improve
Please Login to comment...
Similar Reads
How to change the src attribute of an img element in JavaScript / jQuery ?
The task is to change the src attribute of the <img> element by using JQuery and JavaScript. jQuery prop() Method: This method set/return properties and values of the matched elements. If this method is used to return the property value, it returns the value of the first selected element. If this method is used to set property values, it sets
3 min read
Is it Possible to Set Equivalent of a src Attribute of an img tag in CSS ?
In this article, we are going to see if it is possible to set the equivalent of an src attribute of a <img> tag in CSS. The main objective is to find an alternative that will replace the src attribute in the <img> with something which will do the equivalent work but with CSS. There are two approaches that are prevalent, one is using the
3 min read
What is the role of the src Attribute in <img> Tag ?
The src attribute in the <img> tag specifies the source URL or file path of the image to be displayed on the webpage. The browser needs to fetch and render the image correctly. Without a valid "src" attribute, the image would be missing or broken on the web page. Syntax<img src="image-source-url" alt="alternative-text">Attribute ValuesI
1 min read
Why card images use data-src (not src) for image in Bootstrap 4 ?
Bootstrap 4 card images use src in image tags to providing the location to be loaded in the given image tag and data-src to provide additional information that can be used by JavaScript for improving the users' experience. For data-src and src tag we can conclude as follows: src: If you want to load and display a particular image, then use .src to
3 min read
How href attribute is different from src attribute in HTML ?
In HTML5, the href and src attributes play distinct roles in defining paths or URLs, each associated with specific HTML elements. The href attribute, commonly found in an anchor (<a>) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like <img> and <script>, specifies
1 min read
HTML | <frame>srcAttribute
The HTML <frame>srcAttribute is used to specifies the document URL which is used to display in the frame. Syntax: <frame src="URL"> Attribute Values: It contains single value URL which specifies the source of the document. The possible value of the URL is: absolute URL: It points to another website. relative URL: It points to a file w
1 min read
HTML | <input> src Attribute
The HTML <input> src Attribute is used to specify the URL of the image to be used as a submit button. This attribute can only be used with <input type="image">.Syntax: <input src="URL"> Attribute Values: It contains a single value URL that specifies the link of the source image. There are two types of URL links which are listed be
1 min read
HTML | <video> src Attribute
The HTML <video> src Attribute is used to specify the URL of the video file. This attribute uses Ogg file on Firefox, Opera and Chrome browsers and MPEG4 file on Internet Explorer and Safari browsers. This attribute is new in HTML5. Syntax: <video src="URL"> Attribute Values: It contains a single value URL which specifies the link of so
1 min read
HTML | <track> src Attribute
The HTML <track> src Attribute is used to specify the URL of the track. Syntax: <track src="subtitles_en.vtt"> Attribute Values: It contains single value URL which is used to specify the URL of the track. Below example illustrates the use of src attribute in <track> element. Example: C/C++ Code &lt;!DOCTYPE html&gt; &l
1 min read
HTML | <script> src Attribute
The HTML <script> src Attribute is used to specify the URL of external JavaScript file. The External JavaScript file is used to run on the same script on several pages on a website. We can save the JavaScript file with an extension of .js. We can refer the external script using the src attribute of the <script> element. Syntax: <scri
1 min read
HTML | <iframe> src Attribute
The HTML <iframe> src attribute is used to specify the URL of the document that are embedded to the <iframe> element. Syntax: <iframe src="URL"> Attribute Values: It contains single value URL which specifies the URL of the document that is embedded to the iframe. There are two types of URL link which are listed below: Absolute URL
1 min read
HTML | <audio> src Attribute
The HTML <audio> src attribute is used to specify the URL of the audio files. We should use the Mp3 file for play the audio in the Internet Explorer and Safari Browsers. The source element can be used to add audio files to a webpage to work in all the Browsers. Syntax: <audio src="URL"> Attribute Values: It contains single value URL whi
1 min read
HTML | <source> src Attribute
The HTML <source> src attribute is used to specify the URL of the media resource. The source element is used as a child element of the <audio> and <video> element. Syntax: <source src="URL"> Attribute Values: It contains single value URL which specifies the URL of the media resource. There are two types of URL link which are
1 min read
HTML | <embed> src Attribute
The HTML <embed> src Attribute is used to specify the web address of the embedded content. Syntax: <embed src="URL"> Attribute Values: URL: It is used to specify the web address of the embedded content.An absolute URL: It points to another webpage.A relative URL: it points to a file within a website. Example: C/C++ Code &lt;!DOCTYPE
1 min read
HTML src attribute
The HTML src attribute specifies the URL or file path of an external resource, such as an image, video, audio file, or script, to be embedded or referenced within a webpage. Syntax: <element src="url">HTML src attribute Supported tagsTagDescription<audio>Embeds sound content for playback in a webpage.<embed>Integrates external app
2 min read
HTML | <img>altAttribute
The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image not displayed. It is used to give alternative information for an image. Syntax: <img alt="text"> Attribute Values: It contains single value text which specifies the alternative text for an image. Example: C/C++ Code &lt;!DOCTYPE h
1 min read
HTML | <img> border Attribute
The <img> border attribute is used to specify the border width around the image. The default value of <img> border attribute is 0. It is not supported by HTML 5. Use CSS instead of this attribute. Syntax: <img border="pixels"> Attribute Values: It contains single value pixels which specify the width of the border. Example: <!DO
1 min read
HTML | <img> height Attribute
The <img> height attribute is used to specify the height of the image in pixels. Syntax: <img height="pixels"> Attribute Values: It contains single value pixels which specify the height of the image in pixel. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML img height
1 min read
HTML | <img> hspace Attribute
The HTML <img> hspace attribute is used to specify the number of whitespaces on the left and the right side of the image. The hspace attribute is not supported by HTML 5 you can use CSS there. Syntax: <img hspace="pixels"> Attribute Values: pixels: It specifies the number of whitespaces in terms of pixels. Example: <!DOCTYPE html>
1 min read
HTML | <img> ismap Attribute
The HTML <img> ismap Attribute is a Boolean attribute. When exist, it specifies that the image is a component element of a server-side image-map (an image-map is a picture with clickable areas). When clicking on a server-side image-map, the press coordinates square measure sent to the server as a URL query string. Note: This attribute is perm
1 min read
HTML <img> referrerpolicy Attribute
The HTML <img> referrerpolicy attribute is used to specify the reference information that will be sent to the server when fetching the image. Syntax: <img referrerpolicy="value"> Attribute Values : no-referrer: It specifies that no reference information will be sent along with a request.no-referrer-when-downgrade: It has a default value
1 min read
HTML <img> longdesc Attribute
In this article, we will discuss longdesc in HTML. Longdesc is an HTML attribute used to provide a detailed description of an image. It is an optional attribute that can be used to add extra details about an image beyond the shorter description provided as a tooltip. Syntax: <img longdesc="string">Attribute Value: longdesc: The value can be a
4 min read
HTML <img> crossorigin Attribute
The HTML crossorigin Attribute in is used in <img> element that supports a CORS request when we tried to fetch out the .png or .jpg files from the third party server or from other domain. Syntax <img crossorigin="anonymous | use-credentials"> Attribute Values: anonymous: It has a default value. It defines a CORS request will be sent wit
1 min read
Describe the purpose of using alt attribute in <img> tag in HTML
The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image. It is also very much helpful in the Google ranking of your page. In this article, we will discuss the alt attribute in the <img> tag. Syntax: <img alt="text
1 min read
What does the usemap attribute do in HTML <img> Tag ?
The "usemap" attribute in <img> tags is used to associate an image with a client-side image map. This attribute specifies the name or URL of the <map> element that defines clickable regions within the image. Client-side image maps allow users to interact with specific areas of an image by clicking on predefined regions. Syntax<img sr
2 min read
How to use the shape attribute in the HTML img Tag ?
The "shape" attribute in <img> Tags are used in conjunction with client-side image maps to define the shape of clickable areas within an image. This attribute specifies the shape of the clickable region, allowing developers to create non-rectangular clickable areas such as circles, rectangles, or polygons. Syntax<img src="image.jpg" usemap
2 min read
HTML <img> vspace Attribute
The HTML <img> vspace Attribute is used to specify the number of whitespaces on bottom and top side of an image. Note: The HTML vspace Attribute not supported by HTML5 Syntax: <img vspace="pixels">Attribute Values:pixels: It specifies the number of whitespaces on top and bottom of an image in terms of pixels. Example: C/C++ Code <!DO
1 min read
HTML <img> usemap Attribute
The <img> usemap attribute specifies an image map to associate with an image. It allows you to define clickable areas within an image, linking different regions to specific URLs or actions. This attribute is crucial for creating interactive images on web pages and enhancing user engagement and navigation. Note:When utilizing the <img>
2 min read
HTML <img> width Attribute
Width attribute in HTML <img> tags specifies the width of the image element in pixels or as a percentage of its containing element's width, controlling its visual size on the webpage. Syntax: <img width="pixels">Attribute Values: They contain single value pixels which specify the width of the image in pixels. HTML <img> Width Att
1 min read
HTML <img> loading Attribute
In this article, we will discuss the HTML img loading attribute. This attribute handles how an image will be loaded on a webpage. It accepts three string values, namely, auto, eager and lazy. Lazy Loading Attribute: This strategy is used to identify resources as non-critical and the resources will be loaded only when needed. In other words, Lazy lo
4 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, check: true }), success:function(result) { jQuery.ajax({ url: writeApiUrl + 'suggestions/auth/' + `${post_id}/`, type: "GET", dataType: 'json', xhrFields: { withCredentials: true }, success: function (result) { $('.spinner-loading-overlay:eq(0)').remove(); var commentArray = result; if(commentArray === null || commentArray.length === 0) { // when no reason is availaible then user will redirected directly make the improvment. // call to api create-improvement-post $('body').append('
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `
${comment_text}
`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `
${suggest_val}
`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `
Thank You!
Your suggestions are valuable to us.
You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.
`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('
'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('
'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });
