本文介绍了如何使用 javaScript 将 wordPress 插件生成的 A 标签图片链接转换为 IMG 标签，以便在页面上直接显示图片而非链接。提供了两种实现方法：直接替换 A 标签为 IMG 标签，以及使用 javascript 动态创建 IMG 标签并添加到页面中，并附带示例代码和注意事项。
在某些情况下，wordpress 插件可能会将上传的图片渲染为 A 标签链接，而不是直接显示图片。例如：
<a href="https://www.example.com/images/myimage.png" target="_blank" aria-label="myimage">myimage.png</a>
这种情况下，我们需要使用 JavaScript 将其转换为 IMG 标签，以便直接在页面上显示图片。以下介绍两种实现方法：
方法一：直接替换 A 标签为 IMG 标签
立即学习“Java免费学习笔记（深入）”；
这种方法直接修改 html 结构，将 A 标签替换为 IMG 标签。需要注意的是，这种方法会移除 A 标签原有的链接功能。
// 获取所有包含图片链接的 A 标签 const links = document.querySelectorAll('a[href*=".png"], a[href*=".jpg"], a[href*=".jpeg"], a[href*=".gif"]'); links.foreach(link => { // 获取 A 标签的 href 属性值 const imageUrl = link.href; // 创建一个新的 IMG 标签 const img = document.createElement('img'); img.src = imageUrl; img.alt = link.textContent; // 使用 A 标签的文本内容作为 IMG 标签的 alt 属性 // 将 IMG 标签插入到 A 标签的位置 link.parentnode.replaceChild(img, link); });
代码解释：
- document.querySelectorAll(‘a[href*=”.png”], a[href*=”.jpg”], a[href*=”.jpeg”], a[href*=”.gif”]’)：使用 css 选择器选择所有 href 属性包含 .png, .jpg, .jpeg, 或 .gif 的 A 标签。
- links.forEach(link => { … })：遍历所有匹配的 A 标签。
- const imageUrl = link.href;：获取当前 A 标签的 href 属性值，即图片链接。
- const img = document.createElement(‘img’);：创建一个新的 IMG 标签。
- img.src = imageUrl;：设置 IMG 标签的 src 属性为图片链接。
- img.alt = link.textContent;：设置 IMG 标签的 alt 属性为 A 标签的文本内容。
- link.parentNode.replaceChild(img, link);：将 A 标签替换为新创建的 IMG 标签。
注意事项：
- 该脚本需要在 dom 加载完成后执行。可以将脚本放在 <body> 标签的末尾，或者使用 DOMContentLoaded 事件监听器。
- 需要根据实际情况修改 CSS 选择器，以确保正确选择需要替换的 A 标签。
方法二：使用 JavaScript 动态创建 IMG 标签
这种方法不直接修改 HTML 结构，而是使用 JavaScript 动态创建 IMG 标签，并将其添加到页面中。这种方法可以保留 A 标签原有的链接功能，同时在链接旁边显示图片。
function addgoogleLogo() { showImage("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", 276, 110, "Google Logo"); } function showImage(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; document.body.appendChild(img); // 将图片添加到 body 元素中，可以根据需要修改 }
<button onclick="addGoogleLogo();">Add Google Logo</button>
代码解释：
- addGoogleLogo() 函数调用 showImage() 函数，并传入图片链接、宽度、高度和 alt 文本。
- showImage() 函数创建一个 IMG 标签，设置其 src、width、height 和 alt 属性，然后将其添加到 document.body 中。你可以根据实际需要修改 document.body.appendChild(img)，将图片添加到其他元素中。
总结：
以上两种方法都可以将 A 标签中的图片链接转换为 IMG 标签，以便在页面上直接显示图片。选择哪种方法取决于具体需求。如果需要移除 A 标签原有的链接功能，可以使用第一种方法；如果需要保留 A 标签原有的链接功能，可以使用第二种方法。