Home > Web Front-end > JS Tutorial > body text

How to get the path of the image in javascript

青灯夜游
Release: 2021-10-22 09:20:34
Original
10529 people have browsed it

Javascript method to obtain the image path: 1. Use the getAttribute() function, the syntax is "image object.getAttribute('src')"; 2. Use the src attribute of the Image object

How to get the path of the image in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In HTML, images are inserted through the src attribute of the img tag. The src attribute specifies the URL path to display the image.

Using javascript to obtain the image path is to use javascript to obtain the value of the src attribute of the img tag. Two methods are introduced below:

Method 1: Use the getAttribute() function

The getAttribute() method gets the value of the attribute by name.

Syntax:Picture object.getAttribute('src')

Example:

<img  id="img" src="https://img.php.cn/upload/article/000/000/024/6167dde0cdd4c763.jpg" / alt="How to get the path of the image in javascript" >
<script type="text/javascript">
	var img=document.getElementById("img");
	console.log(img.getAttribute("src"));
</script>
Copy after login

Output result:

How to get the path of the image in javascript

Method 2: Use the src attribute of the Image object

##Syntax:

Image object.src

Example:

<img  id="img" src="https://img.php.cn/upload/article/000/000/024/6167dde0cdd4c763.jpg" / alt="How to get the path of the image in javascript" >
<script type="text/javascript">
	var img=document.getElementById("img");
	console.log(img.src);
</script>
Copy after login
Output result:

How to get the path of the image in javascript

[Recommended learning:

javascript advanced tutorial]

The above is the detailed content of How to get the path of the image in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template