js怎么设置后台图片在img

通过JavaScript设置后台图片显示在img标签的方法有多种，包括使用src属性、FileReader、fetch等方式，其中最常用的方法是通过修改img标签的src属性。

一、通过修改`src`属性

修改img标签的src属性是最直接的方法。你只需要获取图片的URL，然后将其赋值给img标签的src属性。

document.getElementById('yourImgId').src = 'yourImageURL';

二、读取本地文件并显示

使用FileReader对象来读取本地文件，并将其显示在img标签中。这在处理用户上传图片时特别有用。

<input type="file" id="fileInput">
<img id="yourImgId" src="">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('yourImgId').src = e.target.result;
    };
    reader.readAsDataURL(file);
});
</script>

三、通过异步请求获取图片

在某些情况下，你可能需要从服务器端异步获取图片并显示在img标签中。你可以使用fetch API来实现这一点。

fetch('yourImageURL')
    .then(response => response.blob())
    .then(imageBlob => {
        const imageObjectURL = URL.createObjectURL(imageBlob);
        document.getElementById('yourImgId').src = imageObjectURL;
    });

四、使用Base64编码显示图片

有时你可能会需要将图片转换为Base64编码，然后将其赋值给img标签的src属性。

fetch('yourImageURL')
    .then(response => response.blob())
    .then(imageBlob => {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('yourImgId').src = e.target.result;
        };
        reader.readAsDataURL(imageBlob);
    });

五、通过Canvas处理图片

在某些高级应用中，你可能需要先对图片进行处理（如裁剪、调整大小等），然后再显示在img标签中。你可以使用Canvas来实现这一点。

<canvas id="yourCanvasId" style="display:none;"></canvas>
<img id="yourImgId" src="">
<script>
const canvas = document.getElementById('yourCanvasId');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'yourImageURL';
image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
    document.getElementById('yourImgId').src = canvas.toDataURL();
};
</script>

六、处理跨域问题

在通过异步请求获取图片时，可能会遇到跨域问题。你需要确保服务器端设置了正确的CORS头。

Access-Control-Allow-Origin: *

结论

通过JavaScript设置后台图片在img标签中显示的方法多种多样，可以根据具体需求选择合适的方法。最常用的方法是通过修改src属性、读取本地文件、异步请求获取图片以及使用Base64编码。对于高级应用，可以使用Canvas进行图片处理。