如何在Web应用页脚中添加图片？现有代码求助

核心修改要点 #

• 替换文本为图片：把原代码里的文本链接<a class="font-w600" href="javascript:void(0);" target="_blank">ORTHOLogika</a>，替换成图片标签；要是需要保留点击跳转功能，就把图片嵌套在a标签内部。
• 校验图片路径：确保src属性的路径正确，相对路径得根据当前HTML文件的位置调整——比如页面文件在根目录，路径就改成assets/media/photos/logo1.png（去掉开头的../）；页面在子文件夹里的话，../assets/...才是正确路径。
• 调整图片样式：给img标签加样式控制大小，避免图片破坏页脚布局，比如让图片和文字垂直对齐。

修改后的完整代码示例 #

<footer id="page-footer" class="bg-body-light border-top">
    <div class="content py-0">
        <div class="row font-size-sm">
            <div class="col-sm-6 order-sm-2 mb-1 mb-sm-0 text-center text-sm-right">
                Crafted with <i class="fa fa-heart text-danger"></i> by 
                <!-- 保留跳转链接的版本，图片嵌套在a标签内 -->
                <a class="font-w600" href="javascript:void(0);" target="_blank">
                    <img src="assets/media/photos/logo1.png" alt="ORTHOLogika Logo" style="height:16px; vertical-align:middle;">
                </a>
            </div>
            <div class="col-sm-6 order-sm-1 text-center text-sm-left">
                <a class="font-w600" href="javascript:void(0);" target="_blank">ORTHOLogika 1.0</a> &copy; <span data-toggle="year-copy"></span>
            </div>
        </div>
    </div>
</footer>

补充说明 #

• 不需要跳转功能的话，直接删掉外面的a标签，只保留img标签就行。
• style="height:16px; vertical-align:middle;"是为了让图片和文字对齐，高度可以根据页脚字体大小自行调整。
• 务必确认图片文件确实存在于你指定的路径里，路径错误会导致图片加载失败。

内容的提问来源于stack exchange，提问作者George Michas