如何将链接文本更改为 HTML 中的图像答案

【问题标题】：How can I change a link text to image in HTML如何将链接文本更改为 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 width="250" height="150" src="wordspuzzlelogo.jpg" alt="Words Puzzle"></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>

【问题讨论】：

标签： javascript html css json html-table

【解决方案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 width="50" 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 width="250" height="150" src="wordspuzzlelogo.jpg" alt="Words Puzzle"></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 width="250" height="150" src="wordspuzzlelogo.jpg" alt="Words Puzzle"></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，比如