js怎么引入本地图片

JS引入本地图片的方式有多种，主要包括使用相对路径、绝对路径、Base64编码、通过文件选择器上传等。其中，使用相对路径是最常见和最简单的方式。以下将详细描述如何使用相对路径引入本地图片。

相对路径是一种基于当前文件位置的路径表示方法。在网页开发中，使用相对路径引用本地图片非常直观且便于管理。假设有一个名为index.html的文件和一个名为images的文件夹，文件夹中存放了一张名为example.jpg的图片。我们可以通过相对路径将这张图片引入index.html文件中。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入本地图片</title>
</head>
<body>
    <h1>引入本地图片示例</h1>
    <img id="myImage" src="images/example.jpg" alt="Example Image">
</body>
</html>

一、使用相对路径引入本地图片

相对路径是指相对于当前文件的路径。通常，相对路径是最常用的方式之一，因为它不依赖于文件的绝对位置，只需要相对于当前文件的位置即可。

1、创建项目文件结构

首先，我们需要创建一个项目文件结构，其中包括一个HTML文件和一个存放图片的文件夹。假设我们创建了以下文件结构：

/my-project

    /images
        example.jpg
    index.html

2、在HTML文件中引用图片

在index.html文件中，我们可以使用<img>标签来引用images文件夹中的example.jpg图片：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入本地图片</title>
</head>
<body>
    <h1>引入本地图片示例</h1>
    <img id="myImage" src="images/example.jpg" alt="Example Image">
</body>
</html>

3、在JavaScript中动态更改图片

在某些情况下，我们可能需要在JavaScript代码中动态更改图片的路径。我们可以通过修改<img>标签的src属性来实现这一点：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入本地图片</title>
</head>
<body>
    <h1>引入本地图片示例</h1>
    <img id="myImage" src="images/example.jpg" alt="Example Image">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var imgElement = document.getElementById('myImage');
            imgElement.src = 'images/new_example.jpg'; // 动态修改图片路径
        });
    </script>
</body>
</html>

二、使用绝对路径引入本地图片

绝对路径是指文件的完整路径，通常包括协议、主机名和文件位置。在开发和部署环境中使用绝对路径可能会导致一些问题，因为文件的位置可能会在不同的环境中发生变化。

1、获取绝对路径

在某些情况下，我们可能需要使用绝对路径来引用本地图片。假设我们在本地服务器上运行我们的项目，可以使用绝对路径来引用图片：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入本地图片</title>
</head>
<body>
    <h1>引入本地图片示例</h1>
    <img id="myImage" src="http://localhost:8000/images/example.jpg" alt="Example Image">
</body>
</html>

2、在JavaScript中使用绝对路径

同样地，我们可以在JavaScript代码中动态更改图片的绝对路径：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入本地图片</title>
</head>
<body>
    <h1>引入本地图片示例</h1>
    <img id="myImage" src="http://localhost:8000/images/example.jpg" alt="Example Image">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var imgElement = document.getElementById('myImage');
            imgElement.src = 'http://localhost:8000/images/new_example.jpg'; // 动态修改图片路径
        });
    </script>
</body>
</html>

三、使用Base64编码引入本地图片

Base64编码是一种将二进制数据转换为ASCII字符串的编码方式。在某些情况下，我们可能需要将图片编码为Base64字符串，以便在HTML或JavaScript中使用。

1、将图片转换为Base64字符串

首先，我们需要将图片转换为Base64字符串。可以使用在线工具或编写脚本来完成这一任务。假设我们已经将example.jpg图片转换为Base64字符串：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入本地图片</title>
</head>
<body>
    <h1>引入本地图片示例</h1>
    <img id="myImage" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTEhIVFhUXFxUXFhUVFRUVFRUVFhUXFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OGhAQGy0lICYtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAMIBAwMBIgACEQEDEQH/xAAbAAADAQEBAQEAAAAAAAAAAAAABQYDBAcCAf/EADYQAAIBAwIEAwYEBgMAAAAAAAECAwAEERIhBRMxQVFhBiIycYGRobHB0QcUIzM0QhUjQ3KSwv/EABkBAAMBAQEAAAAAAAAAAAAAAAABAgMEBf/EACQRAAICAgICAQQDAAAAAAAAAAABAhEDBBIhMUEiUWEFFHGB/9oADAMBAAIRAxEAPwD9QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

相关问答FAQs：

1. 如何在JavaScript中引入本地图片？

在JavaScript中引入本地图片有多种方法，以下是其中几种常用的方法：

• 使用HTML的img标签来引入本地图片： 首先，在HTML文件中创建一个img标签，并设置src属性为本地图片的路径。然后，可以通过JavaScript来操作这个img标签，例如修改宽度、高度等属性。

• 使用CSS的background-image属性来引入本地图片： 首先，在CSS文件中选择要添加背景图片的元素，并使用background-image属性来设置背景图片的路径。然后，可以通过JavaScript来修改该元素的样式，例如改变背景图片的位置、大小等。

• 使用JavaScript的new Image()方法来引入本地图片： 首先，使用JavaScript的new Image()方法创建一个新的图片对象。然后，设置该图片对象的src属性为本地图片的路径。最后，可以将该图片对象插入到HTML页面中的某个元素中，或者在需要的时候使用该图片对象。

2. 如何在JavaScript中获取本地图片的路径？

要在JavaScript中获取本地图片的路径，可以使用以下方法：

• 使用input标签和FileReader对象： 首先，在HTML文件中创建一个input标签，并设置type属性为file。然后，使用JavaScript的FileReader对象来读取用户选择的图片文件，并获取其路径。

• 使用HTML5的拖放功能： 首先，为HTML元素添加拖放事件的监听器。然后，当用户拖放本地图片到该元素时，可以通过event对象的dataTransfer属性来获取图片的路径。

• 使用AJAX请求： 如果本地图片位于服务器上，可以使用JavaScript的AJAX请求来获取图片的路径。首先，使用XMLHttpRequest对象创建一个请求。然后，发送请求到服务器，并获取服务器返回的图片路径。

3. JavaScript中如何动态修改本地图片的路径？

要动态修改本地图片的路径，可以使用以下方法：

• 使用JavaScript的DOM操作： 首先，通过getElementById、getElementsByClassName或querySelector等方法获取到需要修改路径的图片元素。然后，使用JavaScript的setAttribute方法来修改该图片元素的src属性，将其路径设置为新的路径。

• 使用JavaScript的事件监听器： 首先，为图片元素添加一个事件监听器，例如点击事件。然后，在事件监听器中使用JavaScript的this关键字来获取当前被点击的图片元素，并通过setAttribute方法来修改其src属性。

• 使用JavaScript的循环遍历： 如果需要批量修改多个图片的路径，可以使用JavaScript的循环遍历来逐个修改图片元素的src属性。可以使用for循环、forEach方法或者其他循环方式来实现。