如何在 jQuery 中附加 HTML 代码之前将 URL 分配给 src 属性答案

【问题标题】：How to assign URL to src attribute before append the HTML code in jQuery如何在 jQuery 中附加 HTML 代码之前将 URL 分配给 src 属性
【发布时间】：2022-01-23 21:14:51
【问题描述】：

对于这种奇怪的情况，我需要一个答案。我会尽量解释清楚。我正在尝试使用 jQuery 生成这段 HTML 代码（我现在将其称为模板）。

在图像标签中我已经使用了一个 src，检查我是否可以使用创建的 HTML 获取 URL，但除非调试，否则没有必要。

         <script id="previewImg" type="text/html">
             <div class="position-relative">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/2017_Ford_Mustang_%2844528207214%29.jpg/375px-2017_Ford_Mustang_%2844528207214%29.jpg" class="uploaded-img-preview border-radius-lg shadow text-center" />
                 <div class="rounded-circle uploaded-file-remove-btn">
                     <span class="fa fa-trash text-white"></span>
                 </div>
             </div>
         </script>

在这里你可以看到核心代码没什么奇怪的，只是一些变量声明、初始方法等。一切正常。正如您所猜到的，警报有效并向我们显示 URL (https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/2017_Ford_Mustang_%2844528207214%29.jpg/375px-2017_Ford_Mustang_%2844528207214%29.jpg)


        const totalImageCount = 3;
        let uploadedFileURLs;

        $(document).ready(function () {
            uploadedFileURLs = new Array();
            previewImages = new Array();
            alert("src of image   " + $($("#previewImg").html()).find("img").attr("src"));
        });


        $(function () {
            $('#img-upload').change(function (event) {
                for (let i = uploadedFileURLs.length; i < event.target.files.length; i++) {
                    let url = URL.createObjectURL(event.target.files[i]);
                    uploadedFileURLs.push(url);
                }

                UpdatePreviewImages();
            });
        })

但是...如果您查看我的代码的那部分。那是我刚刚花了大约 5 个小时的黑魔法（我是 js 和 jQuery 的新手），但它仍然不起作用。尽管如此，我还是无法为 created 分配 src （链接不是空的，我一次又一次地检查了所有这些）我指定的行（此行注释）未分配值。当我查看页面源代码时，它显示 img 标签的 src 属性为 src(unknown)

        function UpdatePreviewImages() {
          for (var i = 0; i < uploadedFileURLs.length; i++) {
            let previewImg = $("#previewImg").html();
            $($(previewImg).html()).find("img").attr("src", uploadedFileURLs[i]); // this line
            $("#previewImageContainer").append(previewImg);
          }
        }

但如果我先附加模板（一些 HTML 元素），然后分配 src 值。它确实分配。问题就在这里，它将为所有创建的模板的 img 元素的 src 分配相同的 URL。例如，如果您上传 3 张照片，所有这些照片都将显示为您选择的最后一张照片。

        function UpdatePreviewImages() {
          for (var i = 0; i < uploadedFileURLs.length; i++) {
            let previewImg = $("#previewImg").html();
            let createdImg = $("#previewImageContainer").append(previewImg);
            $(createdImg).find("img").attr("src", uploadedFileURLs[i]); // this line
           }
         }

我错过了什么？

【问题讨论】：

这段代码看起来应该可以工作。您确定 uploadFileURLs 变量包含有效值吗？
我有 6456456% 的把握。我什至尝试手动分配 URL，但它仍然拒绝。

标签： javascript html jquery file-upload

【解决方案1】：

最好使用常规的 querySelectors 而不是 find。

        function UpdatePreviewImages() {
          for (var i = 0; i < uploadedFileURLs.length; i++) {
            // get the image like this
            let image = $("#previewImg img");
            image.attr("src", uploadedFileURLs[i])
            let previewImg = $("#previewImg").html();
            let createdImg = $("#previewImageContainer").append(previewImg);
            // No need for this line anymore, because the src is already set
            // $(createdImg).find("img").attr("src", uploadedFileURLs[i]);
           }
         }

【讨论】：

感谢帮助，不知道这种用法 $("#previewImg img"); .我现在就试试。
不幸的是，仍然无法正常工作。我可以用这种方法读取 src 值，但它仍然在浏览器检查器的元素选项卡中显示“src(unknown)”

【解决方案2】：

我刚刚解决了这个问题，主要原因是Js不是OOP语言。它不像 OOP 语言那样存储变量（我使用 C# 4 年以上）

当您尝试创建变量并更改源时，它会更改但不会影响 previewImg 变量。因为它不再关心创建的变量...简单地说，这将解决问题。

function UpdatePreviewImages() {
            for (var i = 0; i < uploadedFileURLs.length; i++) {
                let previewImg = $($("#previewImg").html()).find("img").attr("src", uploadedFileURLs[i]);
                $("#previewImageContainer").append(previewImg);
            }
        }

【讨论】：