更改 img 标签上的 src，无法使其工作答案

【问题标题】：Changing src on img tag, can't make it work更改 img 标签上的 src，无法使其工作
【发布时间】：2012-09-16 11:34:51
【问题描述】：

我一直在尝试使用 jquery 和 httprequest 更改网页中的图像，但没有任何运气......经过大量研究后，我决定寻求帮助。代码粘贴在下面，我首先尝试询问 json（什么工作正常），然后更新图像上的 scr ......没用。在最后的测试中，我使用了鼠标悬停和鼠标移出功能，但效果不佳，有趣的是其他属性（如显示和隐藏）工作正常，唯一的问题是 attr('scr','')。

谢谢

<!DOCTYPE html>
<html>
<head>
<script src="..\js\jQuery.js"></script>
<script>
  $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php", 
  {plantSelected:"ARGYRANTHEMUM-POLLY"},
  function(data){
    $('#a1').attr('scr','data:image/jpg;base64,'+data.plantDetail.Image);
  });
  $(document).ready(function() {
    $('#a1').mouseover(function(e) {
      $('#a1'.attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    }).mouseout(function(e) {
      $('#a1').attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    });
  });
</script>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


</body>
</html>

【问题讨论】：

有属性名为scr？ o_0

标签： javascript jquery html json

【解决方案1】：

看起来像是一个错字，scr 在为a1 分配属性时应该是src

【讨论】：

【解决方案2】：

我发现并解决了几个问题，但最终得到了一些工作代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://ip.jsontest.com", null,
            function (data) {
                console.log(data)
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

你可以在这里看到它的工作原理：

http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcTypeNoComments.html

此代码使用名为“JSONTest”的服务来获取格式正确的 JSON 代码。这将返回一个键/值 {ip: "xxx.xxx.xxx.xxx"} 的对象（数据），它显示您的 IP 地址。这是我用来获取 JSON 响应的服务网站：

http://teamaqua.github.com/JSONTest/

要查看控制台日志输出，只需在浏览器中打开一个控制台（例如，按 F12 键，或打开 FireFox 的 FireBug 插件。深入到对象中以查看正确格式化的键/值对控制台。

我用 scr->src 错字修复和其他一些需要修复的东西修复了你的代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
            {plantSelected:"ARGYRANTHEMUM-POLLY"},
            function (data) {
                ($('#a1')).attr('src', 'data:image/jpg;base64,' + data.plantDetail.Image);
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

你可以在这里看到它（可能）失败：

http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcType.html

在 Chrome 中出现跨域错误，在 IE 和 FireFox 中似乎静默失败：

XMLHttpRequest 无法加载 http://www.containernurseries.co.nz/json/jsonPlantDetails.php?plantSelected=ARGYRANTHEMUM-POLLY。来源http://www.sanbarcomputing.com 不允许访问控制允许来源。

这是一篇很好的帖子，讨论了解决此问题的一种方法（将其更改为 JSONP），但由于您的服务器返回 JSON，而不是 JSONP，因此它也不起作用（我尝试过）：

stackoverflow: access-control-allow-origin-not-allowed-by

我相信，您需要以 JSONP JavaScript 可执行函数的形式从服务器返回结果。要发送 JSONP 请求，您需要更改以下行：

$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",

到这里：

$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php?callback=?",

jQuery 然后会自动为您生成 JSONP 请求。它可以工作，但由于结果不是可执行的 JavaScript，因此在 Chrome 中会出现以下错误：

Uncaught SyntaxError: Unexpected token :

因为我认为 Chrome 正在尝试将 JSON 作为函数执行，但事实并非如此。

我相信，如果您需要，需要对服务器进行更改才能跨域工作。

这是一篇关于跨域问题的好文章：

https://developer.mozilla.org/en-US/docs/HTTP_access_control

【讨论】：