括号图像实时预览

Question

所以我在这里不知所措。我知道我的图像有正确的 src 代码，当我在 Chrome 中查看页面时，不使用括号，图像将显示。但是当我使用 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

src="c:web projects/art/img/afr1.jpg" 中的这个 "c:web" 是什么。您是说 c:/web/projects/art/img/afr1.jpg?

如果是这样，请尝试设置类似 src="art/img/afr1.jpg".

的相对路径

Answer 2

始终将图像和 js 等支持文件 css 复制到工作目录中并带有相应的文件夹名称，然后引用相对路径以引用代码中的文件。

括号图像实时预览

Brackets image live preview

html

css

adobe-brackets