如何在我的html文件中使用外部jquery显示和图像

how to display and image using external jquery in my html file

本文关键字：外部 jquery 显示 图像 我的 html 文件      更新时间：2023-09-26

我是jquery的新手，有人能告诉我如何在我的html文件中使用外部jquery进行显示和图像处理吗。

我希望我的html是干净的，并加载外部jquery文件中提到图像路径的图像。

我的jquery文件将类似于testjquery.js

 // url to load the image (which i dont know ,whats the code for it)

和在我的html文件中。

<html>
  <head>
    <script type="text/javascript">
        (function() {
            var test = document.createElement('script');
            test.type = 'text/javascript'; 
            test.async = true;
            test.src = 'testquery.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(test, s);
            test.onload=function(){
                // function to load the external image
            }
         })();
    </script>
  </head>
  <body>
  </body>
</html>

提前感谢！

您可以简单地使用：

HTML

<div id="divWhereYouWantAddImage"></div>

查询

$('#divWhereYouWantAddImage').append("<img src='img.jpg' />");

您可以在这里阅读更多关于jquery .append()函数的信息。

我认为你的问题错了
所以测试这个

首先确定已加载Jquery脚本文件

并为div元素设置html

<div id="imageContainer"></div>
<script>
    $('#imageContainer').html('<img src="/images/test.jpg" />');
</script>

以下是ExternalJSFile.js 中的文件内容

imageUrl = 'your/img/path.png';

你的html文件

<html>  
</html>
<script src="ExternalJSFile.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
     alert(imageUrl);
  });
</script>

我不知道你到底是什么意思。。。但我猜你指的是突兀的jQuery。所以你的html保持干净。您可以将其放入外部文件或页面底部的javascript。如果将其放在外部文件中，则可以删除脚本标记。

<html>
  <head>
    <script src="style.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="image"></div>
  </body>
</html>

在style.js中（你可以把它放在同一个目录中）

  $(document).ready(function(){
    imagePath = 'your_image.png';
    $('#image').html("<img src='" + imagePath + "' />")
  });

您可以使用html或append。html函数清除整个图像div，并将其替换为图像。append将它附加到div中，以便以后可以添加另一个。（document）.ready函数将在加载整个文档后运行。

相关文章：