如何将链接文本更改为 HTML 中的图像
Posted
技术标签:
【中文标题】如何将链接文本更改为 HTML 中的图像【英文标题】：How can I change a link text to image in HTML 【发布时间】：2020-06-27 21:37:03 【问题描述】：我是一个 html 初学者，但遇到了问题，所以我有这个网页，它基本上是一个 Json Web 数据库，here 是网页的图像。它只是一个充满数据的表格。 我的问题是如何使您在表格中看到的链接显示为图像而不是文本链接。
这是this页面的代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>Get Levels</title>
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background: #71e2c5;
td,
th
border: 5px solid #ffc300;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #4CAF50;
color: black;
.footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
</style>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function()
var uri = 'https://extendsclass.com/api/json-storage/bin/cdfddcf';
var ids = 0;
var data_src = '';
$.ajax(
url: uri,
type: 'GET',
data: '',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data, textStatus, jqXHR)
var jsonStr = JSON.stringify(data.data);
var html_view = '<table><tr>';
html_view = html_view + '<th>Level ID</th>';
html_view = html_view + '<th>Level Image</th>';
html_view = html_view + '<th>Word 1</th>';
html_view = html_view + '<th>Word 2</th>';
html_view = html_view + '<th>Word 3</th>';
html_view = html_view + '<th>Word 4</th>';
html_view = html_view + '</tr>';
for (var i = 0; i < data.data.length; i++)
html_view = html_view + '<tr>';
html_view = html_view + '<td>' + data.data[i].id + '</td>';
html_view = html_view + '<td>' + data.data[i].img + '</td>';
html_view = html_view + '<td>' + data.data[i].w1 + '</td>';
html_view = html_view + '<td>' + data.data[i].w2 + '</td>';
html_view = html_view + '<td>' + data.data[i].w3 + '</td>';
html_view = html_view + '<td>' + data.data[i].w4 + '</td>';
html_view = html_view + '</tr>';
html_view = html_view + '</table>';
$('#data_view').html(html_view);
);
);
//]]>
</script>
</head>
<body style="background-image: url('background.jpg');">
<center><img src="wordspuzzlelogo.jpg" ></center>
<b><font size="6" face="Comic Sans MS" color="#50bfda"><center><a>Game Levels Web Data Base</a></center></font></b>
<br>
<div id='data_view'>
Loading Data , Please wait ....
</div>
<br>
<br>
<div id='data_str'>
<br>
</div>
</br>
<div class='footer'>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：看起来这就是图片的具体网址：
data.data[i].img
您在此处添加为文本：
html_view = html_view + '<td>'+data.data[i].img+'</td>';
按照您使用的相同编码样式，您可以轻松地将其包装在 HTML 标记中，例如 <a> 和 <img>。例如：
html_view = html_view + '<td><a href="'+data.data[i].img+'"><img src="'+data.data[i].img+'"/></a></td>';
【讨论】：
【参考方案2】：只需将图片网址添加到img 标记即可。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>Get Levels</title>
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background: #71e2c5;
td,
th
border: 5px solid #ffc300;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #4CAF50;
color: black;
.footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
</style>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'>
</script>
<script type='text/javascript'>//<![CDATA[
$(function ()
var uri = 'https://extendsclass.com/api/json-storage/bin/cdfddcf';
var ids = 0;
var data_src = '';
$.ajax(
url: uri,
type: 'GET',
data: '',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data, textStatus, jqXHR)
var jsonStr = JSON.stringify(data.data);
var html_view = '<table><tr>';
html_view = html_view + '<th>Level ID</th>';
html_view = html_view + '<th>Level Image</th>';
html_view = html_view + '<th>Word 1</th>';
html_view = html_view + '<th>Word 2</th>';
html_view = html_view + '<th>Word 3</th>';
html_view = html_view + '<th>Word 4</th>';
html_view = html_view + '</tr>';
for (var i = 0; i < data.data.length; i++)
html_view = html_view + '<tr>';
html_view = html_view + '<td>' + data.data[i].id + '</td>';
// Here it is
html_view = html_view + '<td><img src="' + data.data[i].img + '"/></td>';
html_view = html_view + '<td>' + data.data[i].w1 + '</td>';
html_view = html_view + '<td>' + data.data[i].w2 + '</td>';
html_view = html_view + '<td>' + data.data[i].w3 + '</td>';
html_view = html_view + '<td>' + data.data[i].w4 + '</td>';
html_view = html_view + '</tr>';
html_view = html_view + '</table>';
$('#data_view').html(html_view);
);
);
//]]></script>
</head>
<body style="background-image: url('background.jpg');">
<center><img src="wordspuzzlelogo.jpg" ></center>
<b>
<font size="6" face="Comic Sans MS" color="#50bfda">
<center><a>Game Levels Web Data Base</a></center>
</font>
</b>
<br>
<div id='data_view'>
Loading Data , Please wait ....
</div>
<br>
<br>
<div id='data_str'>
<br>
</div>
</br>
<div class='footer'>
</div>
</body>
</html>【讨论】：
【参考方案3】：只需使用<img src="image_url"> 标签。
html_view = html_view + '<td><img src="' + data.data[i].img + '"></td>';
示例：
$(function()
var uri = 'https://extendsclass.com/api/json-storage/bin/cdfddcf';
var ids = 0;
var data_src = '';
$.ajax(
url: uri,
type: 'GET',
data: '',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data, textStatus, jqXHR)
var jsonStr = JSON.stringify(data.data);
var html_view = '<table><tr>';
html_view = html_view + '<th>Level ID</th>';
html_view = html_view + '<th>Level Image</th>';
html_view = html_view + '<th>Word 1</th>';
html_view = html_view + '<th>Word 2</th>';
html_view = html_view + '<th>Word 3</th>';
html_view = html_view + '<th>Word 4</th>';
html_view = html_view + '</tr>';
for (var i = 0; i < data.data.length; i++)
html_view = html_view + '<tr>';
html_view = html_view + '<td>' + data.data[i].id + '</td>';
html_view = html_view + '<td><img src="' + data.data[i].img + '"></td>';
html_view = html_view + '<td>' + data.data[i].w1 + '</td>';
html_view = html_view + '<td>' + data.data[i].w2 + '</td>';
html_view = html_view + '<td>' + data.data[i].w3 + '</td>';
html_view = html_view + '<td>' + data.data[i].w4 + '</td>';
html_view = html_view + '</tr>';
html_view = html_view + '</table>';
$('#data_view').html(html_view);
);
);<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>Get Levels</title>
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background: #71e2c5;
td,
th
border: 5px solid #ffc300;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #4CAF50;
color: black;
.footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
</style>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'>
</script>
</head>
<body style="background-image: url('background.jpg');">
<center><img src="wordspuzzlelogo.jpg" ></center>
<b><font size="6" face="Comic Sans MS" color="#50bfda"><center><a>Game Levels Web Data Base</a></center></font></b>
<br>
<div id='data_view'>
Loading Data , Please wait ....
</div>
<br>
<br>
<div id='data_str'>
<br>
</div>
</br>
<div class='footer'>
</div>
</body>
</html>【讨论】：
可以添加css，比如以上是关于如何将链接文本更改为 HTML 中的图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Swift 中将 UIActivity 复制更改为复制 UIActivityViewController 中的链接