Question

我正在尝试创建一个显示在图像上的链接，该链接应该将我带到其他视图。我只能在图片下方添加一个看起来不太合适的链接。我正在使用基本的html。有人可以帮我吗？

<div class="card">
        <img src="@Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
        <div class="container">
<br>
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

链接只是包裹可点击部分的<a>元素，它可能是大多数文本，但也很容易成为<img>元素。您可以手动创建一个，然后使用Url.Action助手来定义URL：

<a href="@Url.Action("Index")">
    <img src="@Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
</a>

Answer 2

此代码对我有用。您必须创建一个指向下一个视图的链接，然后添加图像。您还可以使用样式标签来操纵自己喜欢的链接。

   <li>
        <a href="@Url.Action("Display name", "Controller")" title="your title" class="links">
            <br />
            <img alt="image alt" src="@Url.Content("~/Content/B01.jpg")"
                 style="width:500px;height:250px;border:0;"><br /><br /> <font size="4">Display a name</font>
        </a>
    </li>


You can also include a style

</ul>
<style type="text/css">
    ul.links {
        list-style-type: none;
    }

        ul.links li {
            display: inline-block;
            padding-left: 10px;
            margin-left: 10px;
            padding-bottom: 10px;
        }

            ul.links li:first-child {
                border-left: 0;
                padding-left: 10px;
                margin-left: 10px;
            }
</style>




<br />


<ul class="links"></ul>
<style>
    ul.links {
        list-style-type: none;
    }

        ul.links li {
            border-left: 0;
            padding-right: 30px;
            margin-left: 0px;
        }
</style>

如何添加图像链接

2 个答案: