怎么让js显示本地的图片不显示

要让JS显示本地的图片可以通过以下几种方式：使用File API读取文件、使用URL.createObjectURL生成URL、将图片转换为Base64格式。 其中，使用File API读取文件是一种非常直观且高效的方法。

File API读取文件

File API提供了一种标准的方式来读取本地文件系统中的文件。通过File API，我们可以实现用户选择本地图片后，在网页上显示该图片的功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Display Local Image</title>
</head>
<body>
  <input type="file" id="fileInput" />
  <img id="image" alt="Your Image" />
  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('image').src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    });
  </script>
</body>
</html>

在上面的示例中，通过File API读取文件，并将文件转换为Data URL格式，然后将其赋值给img标签的src属性，从而实现显示本地图片的功能。

一、使用File API读取文件

File API是HTML5的一部分，允许Web应用程序从用户的本地文件系统中读取文件。通过File API，开发者可以实现用户选择本地图片并在网页上显示的功能。

1、File API简介

File API提供了一系列接口和方法，用于读取本地文件。主要包括File对象、FileList对象、FileReader对象等。

File对象：表示用户选择的文件，包含文件的名称、类型、大小等信息。
FileList对象：表示一个文件列表，通常由元素生成。
FileReader对象：用于读取File对象中的文件内容，并将其转换为不同的格式，如Data URL、文本等。

2、FileReader对象的使用

FileReader对象是File API的核心，通过它可以读取文件内容。FileReader对象提供了多个方法来读取文件，如readAsDataURL、readAsText、readAsArrayBuffer等。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('image').src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
});

在上面的代码中，通过FileReader对象的readAsDataURL方法将文件内容读取为Data URL格式，并在加载完成后将其赋值给img标签的src属性。

二、使用URL.createObjectURL生成URL

URL.createObjectURL方法可以将File对象或Blob对象转换为一个临时的URL，该URL指向对象的数据。使用该方法可以在不读取文件内容的情况下，直接显示本地图片。

1、URL.createObjectURL简介

URL.createObjectURL方法接受一个File对象或Blob对象作为参数，返回一个表示该对象的临时URL。该URL的生命周期与Document绑定，当Document被卸载时，该URL也会被释放。

2、使用URL.createObjectURL显示本地图片

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const objectURL = URL.createObjectURL(file);
    document.getElementById('image').src = objectURL;
  }
});

在上面的代码中，通过URL.createObjectURL方法生成一个指向File对象的临时URL，并将其赋值给img标签的src属性，从而实现显示本地图片的功能。

三、将图片转换为Base64格式

将图片转换为Base64格式是一种常见的处理方式，可以将图片数据直接嵌入到HTML文档中。通过Base64编码，可以避免跨域问题，并且方便传输小尺寸图片。

1、Base64编码简介

Base64是一种基于64个可打印字符来表示二进制数据的编码方式。通过Base64编码，可以将图片数据转换为字符串形式，并嵌入到HTML文档中。

2、使用FileReader和Canvas将图片转换为Base64格式

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.src = e.target.result;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        const dataURL = canvas.toDataURL('image/png');
        document.getElementById('image').src = dataURL;
      };
    };
    reader.readAsDataURL(file);
  }
});

在上面的代码中，通过FileReader对象读取文件，并将其转换为Data URL格式。然后使用Canvas绘制图片，并将其转换为Base64编码格式，最后将其赋值给img标签的src属性。

四、选择合适的方式

在实际开发中，选择哪种方式来显示本地图片取决于具体的需求和场景。以下是几种方式的比较：

1、File API读取文件

优点：

简单直观，易于理解和使用。
支持各种文件格式，不仅限于图片。
可以读取文件内容，并进行进一步处理。

缺点：

需要读取文件内容，可能对性能有一定影响。

2、URL.createObjectURL生成URL

优点：

不需要读取文件内容，性能较好。
生成的URL可以直接用于img标签的src属性。

缺点：

生成的URL是临时的，可能在某些情况下需要手动释放。

3、Base64编码

优点：

可以将图片数据直接嵌入到HTML文档中，避免跨域问题。
适合传输小尺寸图片。

缺点：

编码后的数据体积较大，可能影响传输效率。
对于大尺寸图片，性能可能较差。

五、常见问题及解决方案

在实际开发中，可能会遇到一些问题和挑战。以下是一些常见问题及其解决方案：

1、浏览器兼容性问题

虽然File API和URL.createObjectURL在现代浏览器中得到了广泛支持，但在一些旧版浏览器中可能不兼容。可以使用Polyfill或兼容性库来解决浏览器兼容性问题。

2、跨域问题

在某些情况下，可能会遇到跨域问题。可以使用Base64编码或设置CORS头部来解决跨域问题。

3、性能问题

对于大尺寸图片，读取文件内容或进行Base64编码可能会影响性能。可以考虑使用URL.createObjectURL方法，或在后台进行文件处理。

4、图片预览效果

在显示本地图片时，可能需要对图片进行缩放、裁剪等处理。可以使用Canvas或CSS来实现图片的预览效果。

总之，通过使用File API、URL.createObjectURL和Base64编码等方法，可以方便地实现JS显示本地图片的功能。选择合适的方法取决于具体的需求和场景，并注意处理浏览器兼容性、跨域问题和性能问题。