How to reference images in JavaScript

JavaScript is a very popular programming language that is widely used in Web front-end development. In web applications, pictures are commonly used resources. How to use JavaScript to reference pictures is a very important part of web development. This article will introduce you to how to reference images in JavaScript.

1. Use HTML tags to reference images

In HTML, the commonly used way to reference images is to use the img tag, as shown below:

<img src="image.jpg" alt="图片">

Among them, the src attribute specifies The path of the image. The alt attribute is the alternative text displayed when the image cannot be loaded. JavaScript can dynamically modify the displayed image by manipulating the attributes of the img tag.

For example, we can add an id attribute to the img tag, then obtain the tag through the document object, and modify the value of its src attribute to achieve the effect of dynamically changing images. The sample code is as follows:

<img id="myImg" src="old-image.jpg" alt="图片">

var img = document.getElementById("myImg");
img.src = "new-image.jpg";

2. Use CSS styles to reference images

In CSS, we can use the background-image style to reference images, as shown below:

background-image: url("image.jpg");

Similarly, JavaScript can dynamically modify the displayed background image by manipulating the element's style attribute. For example, we can replace the background image of a div element with another image. The sample code is as follows:

<div id="myDiv" style="background-image: url(old-image.jpg)"></div>

var div = document.getElementById("myDiv");
div.style.backgroundImage = 'url(new-image.jpg)';

3. Use Canvas to draw pictures

Canvas is a drawing API in HTML5. Can be used to draw graphics, text, pictures, etc. To draw a picture in Canvas, you need to first create an Image object, and then use the drawImage method to draw it on Canvas. The sample code is as follows:

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0); // 将图片绘制到Canvas上
};
img.src = "image.jpg";

4. Use Base64 encoding to reference the picture

In JavaScript , we can also use Base64 encoding to embed images directly into HTML or CSS, avoiding the overhead of network requests. The specific method is to convert the image file into a Base64-encoded string, and then embed the string directly into the HTML or CSS code. The sample code is as follows:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgA...（省略部分字符串）">

#myDiv {
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgA...（省略部分字符串）);
}

However, using Base64 encoding to embed the image will make the HTML or CSS The code becomes bloated and reduces the readability of the code. Therefore, it is recommended to use this method only when the images are small and rarely used.

Summary:

There are many ways to reference images in JavaScript, and you can use HTML tags, CSS styles, Canvas drawing, Base64 encoding and other technologies. In actual development, it is necessary to choose the appropriate method according to specific business needs and scenarios. We can choose a method that suits us according to our own situation to quote pictures and gain better development experience in Web development.

The above is the detailed content of How to reference images in JavaScript. For more information, please follow other related articles on the PHP Chinese website!