需要帮助以 HTML 和 SCSS 显示图像答案

【问题标题】：Need help getting images to display in HTML and SCSS需要帮助以 HTML 和 SCSS 显示图像
【发布时间】：2020-07-11 09:51:11
【问题描述】：

我对 HTML 和 CSS（在这种情况下为 SCSS）真的很陌生，并且在我一直在试验的本地主机页面上正确显示图像时遇到问题。我将在下面发布我的 HTML 行以及我的 SCSS 行。也许你们可以告诉我我做错了什么，以便我继续前进。

我尝试只链接项目文件夹目录路径，一直到通过我的计算机到图像的整个路径。我已经四次检查了文件和图像上的名称。我相信这可能只是一个语法错误。

<!--HTML LINES:-->

<div id="Center.Logo">
<img src="sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home.component.images\center-logo.png"
alt="Center Circle" style=" width: 250px; height: 250px;"> <!--Desired image -->
</div>

/* SCSS LINES: */

 #Center.Logo {
            img{
                margin: auto;
                align-content: center;
            }
        }

我希望图像显示在页面的中心，相反，它只是在页面左下角的一个小图片图标旁边为我提供了 ALT 标记。

【问题讨论】：

P.S. SCSS 中未大写的#center 标签已调整为大写无效。
嗨 NotJayson，欢迎来到 stackoverflow。你可以发布你的目录结构吗？比如 scss 最终会编译到哪里以及图像在哪里？
@BagusTesa 我可以将一般目录结构发布到 SCSS 和图像文件，但是，我不确定 SCSS 将被准确编译到哪里。这是 SCSS 的目录路径：C:\Users\Jason\Downloads\Repo-1\MEAN-Expirimental\sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home.component.scss /// / 和图像的路径：C:\Users\Jason\Downloads\Repo-1\MEAN-Expirimental\sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home.component.images\center-logo .png
IIRC，img 标签只允许使用斜杠 (/) 来指示新路径，而不是反斜杠 (``)。
@Edric 我将 (\) 更改为 (/)，但它什么也没做。

标签： html css sass

【解决方案1】：

我认为你的选择器在你的代码中应该是#Center.Logo，它看起来像#center.Logo

如果你想让它看起来居中，试试this

如果您无法获取图像，请尝试调整您的项目结构。

<img src="../assets/img/centered-logo.jpg"> 等不是整个路径之类的。

【讨论】：

我在我自己的帖子中发表了评论，澄清这两个标签实际上都有大写 C，我只是打错字了，但不幸的是它也有同样的问题。
你能看一下项目结构吗？
附加帮助不起作用，即使您修改了 HTML 和 SCSS 的语法。我应该补充一点，我正在使用 Visual Studio Code，运行 Angular CLI 插件来服务我的 Localhost 页面。如果这意味着什么。
你的 Angular 项目？
我回复 Bagus Tesa 并提供了 SCSS 和图像的路径。

【解决方案2】：

我注意到的第一件事是您在 id 名称中使用了一个点。这是一个问题，因为在 css 中，点是类选择器的一部分。

规则#CSS.Logo {...} 适用于同时具有'CSS' id 和'Logo' 类的元素。像这样的：

<div id="CSS" class="Logo">
    ...
</div>

您的代码中没有类似的元素，因此没有应用 css 规则。

其次，您的原始 css 代码不适合在另一个容器中居中放置图像。

// This is your original code as you posted it:
img {
    margin: auto;
    align-content: center;
}

规则 align-content 仅适用于弹性盒容器。但是，您可以使用边距使图像水平居中，如下所示：

img {
    display: block;
    margin: 0 auto;
}

你可能想要的是这个：

<div id="center-logo">
  <img src="your-image.png" alt="Center Circle">
</div>

body {
  margin: 0; // making sure you have the whole page at your disposal
}

#center-logo {
  height: 100vh; // using the full height of the viewport

  // this is where the actual centering happens:
  display: flex; // this is necessary for the following 3 rules (flex box)
  flex-flow: row nowrap; // in this case this could also be column nowrap
  align-items: center; // vertical center
  justify-content: center; // horizontal center

  img {
  // set a width and height so the image does not stretch and to avoid repositioning
  // the image (or other content if there is any) as soon as the image has been loaded
    width: 250px; 
    height: 250px;
  }
}

请注意，我在 id 名称中使用了小写字母，因为它通常有助于避免因名称拼写错误而导致的问题。

【讨论】：

【解决方案3】：

我假设它是一个普通的 html 和 css。

你可以用node编译。

npm init
npm install node-sass

将此添加到您的 package.json（在脚本中）

"scss": "node-sass --watch scss -o css"

创建两个文件夹。

CSS 和 SCSS。在每一个里面，文件样式。（有正确的终止） css> style.css 例如

最后

npm run scss

您在 scss 中键入的所有内容都会转换为 css。

【讨论】：