Question

所以我在这里不知所措。我知道我的图像有正确的src代码，当我在Chrome中查看页面而不使用Brackets时，图像会显示。但是当我使用Brackets Live预览时，它不会在浏览器中显示图像，它会为它创建一个框，但它是空的。有趣的是，当我将鼠标悬停在Brackets文本编辑器中的代码上时，我会得到图像的预览。任何帮助将不胜感激！

    <!doctype html>
<html>
    <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
    <title>Here goes #1</title>
    </head>
    <body>
        <header class="main-header">
                <ul class="nav bv">
                    <li><h1>My Favortie Artists</h1></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Podcasts</a></li>
                    <li><a href="#">Books</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
        </header>

            <div class="main-content">
                <div class="content1">
                    <ul clas="imgs">
                        <li class="afr"><a href="afr.html"><img src="c:web projects/art/img/afr1.jpg">Afremov</a></li>

                    </ul>
                    <p></p>
                </div>
            </div>




    </body>
</html>


 * {
    margin: 0;
    padding; 0;
    box-sizing: border-box;
    width: 100%;
}

body li {
    list-style-type: none;
}

ul {
    padding: 0;
}

.nav {
    text-align: center;
    background-color: beige;
    box-shadow: 0 1px 10px black;
    height: 230px;
}

.nav h1 {
    text-shadow: 5px 7px 4px white, 2px 2px 10px beige;
    line-height: .8em;
    padding: 10px 0;

}

/*COMMON FONTS*/

.bv {
    font-family: 'Bevan', cursive;
}

/*SMALL SCREEN STYLE*/
.nav li {
    font-size: 1.25em;
    text-shadow: 2px 3px 10px white;
}


/*LINK STYLES*/
.nav a {
    text-decoration: none;
    list-style-type: none;
    border-bottom: 2px solid grey;
    padding: 0 15px;
    color: black;
    border-radius: 10%;
}

.nav a:hover {
    background-color: bisque;
    padding: 0 5%;
    font-size: 1.5em;
    border-radius: 25%;
    transition: background-color .6s,  padding .8s; font-size 3s, border-radius .8s;
}

/*LARGE SCREEN*/
@media (min-width: 769px) {
    .nav {
        display: flex;
        height: 150px;
    }
    .nav li {
        flex-grow: 1;
        align-self: center;
}

    .nav:not(:first-child) {
        flex-flow: wrap;
        justify-content: flex-end;
    }
    .nav h1 {
        padding-right: 50%;
        flex-grow: 2;
        margin-left: 10px;
    }
    .nav a:hover {
    background-color: bisque;
    padding: 0 20%;
    font-size: 1.5em;
    border-radius: 25%;
    transition: all 1s;
}

/*Image Links*/

Answer 1

这是什么＆＃34; c：web＆＃34;在src =＆＃34; c：web projects / art / img / afr1.jpg＆＃34;。你的意思是c：/web/projects/art/img/afr1.jpg？

如果是这样，尝试设置一个相对路径，如src =＆＃34; art / img / afr1.jpg＆＃34;。

Answer 2

始终将工作目录中的图像和js，css等支持文件与相应的文件夹名称一起复制，然后参考相关路径以引用代码中的文件。

Brackets图像实时预览

2 个答案: