检索 div 的内容并制作图像 src

Posted 2023-03-05

【中文标题】检索 div 的内容并制作图像 src

【英文标题】：retrieve contents of div and make image src

【发布时间】：2018-07-30 00:11:52

【问题描述】：

有没有办法获取 div 的内容并将该 ocntent 放在图像的 'src' 参数中？我正在做一个使用 json 加载翻译文件的项目，因此我无法直接加载图像，但我想我至少可以加载图像名称。

所以：

<div id="flag-name" style="hidden">en-flag.jpg</div>

<img src="DIV CONTENTS HERE">

感谢您的想法！ （我也在使用 jquery，所以对此也很开放）

【问题讨论】：

JS 或 Jquery 可以为您做到这一点。在您的问题中添加您正在使用的 js 代码。

【参考方案1】：

按钮展示了这种能力。随时随地使用按钮的 onclick 代码。

<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="myImage" />
<button onclick="document.getElementById('myImage').src=document.getElementById('flag-name').innerText">Change</button>

【参考方案2】：

您可以在 jQuery 中通过获取 div 的文本然后像这样设置图像的来源来简单地做到这一点：

var source = $("#flag-name").text();
console.log("before - " + $("#image").attr("src"));
$("#image").attr("src",source);
console.log("after - " + $("#image").attr("src"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">en-flag.jpg</div>

<img id="image" src="DIV CONTENTS HERE">

【讨论】：

@dilby 很高兴我帮助了 :)

【参考方案3】：

您需要一个事件来启动 jQuery/javascript——所以我添加了一个按钮。此外，如果您为特定的 DIV 和 IMG 标签提供 ID 或类，您会发现它们更容易定位。

$('button').click(function()
  var mySrc = $('#flag-name').text();
  $('img').attr('src', mySrc);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">http://placeimg.com/300/200/animals</div>
<img src="DIV CONTENTS HERE">
<button>Go</button>