HTML插入图片的方法及Angular7项目SCSS环境下img标签报错排查

嘿，我来帮你搞定这两个问题！

当然有！HTML里插入图片有几种常用的靠谱方案，按需选择就行：

• 标签（最常用）：就是你代码里用的这种，直接通过src属性指向图片路径，还能搭配alt（替代文本）、width/height（尺寸）等属性，适合直接展示核心图片内容。
• CSS/SCSS背景图：如果图片是装饰性元素，或者需要做平铺、渐变叠加这类复杂样式，可以在SCSS中用background-image: url('assets/img/rcenter.jpg')，再配合background-size、background-position等属性调整显示效果。
• 元素（适配多场景）：如果需要给不同设备/屏幕尺寸提供不同分辨率的图片，用<picture>包裹<source>和<img>标签即可，浏览器会自动匹配最合适的资源，示例：

  <picture>
    <source media="(max-width: 600px)" srcset="assets/img/rcenter-small.jpg">
    <img src="assets/img/rcenter.jpg" alt="" style="width:200px;height:200px;border:0;" align="middle">
  </picture>
  

Angular7项目中标签报错的排查与解决 #

你在home component.html里的这个img标签报错，大概率是路径配置或文件存在性的问题，和用SCSS代替CSS关系不大，给你几个排查步骤：

1. 确认文件实际存在：先检查项目目录，src/assets/img/下有没有rcenter.jpg，注意文件名大小写（Angular在不同系统下对大小写敏感，别写错）。
2. 检查angular.json的assets配置：Angular需要把assets目录配置到build选项中，才会在打包时复制图片到输出目录。打开项目根目录的angular.json，找到architect -> build -> options -> assets，确保包含"src/assets"或更具体的"src/assets/img"，示例：

   "assets": [
     "src/favicon.ico",
     "src/assets"
   ]
   

3. 调整路径写法：试试这两种更可靠的写法：
   • 绝对路径：src="/assets/img/rcenter.jpg"（斜杠开头，指向项目根目录下的assets）
   • Angular属性绑定：[src]="'assets/img/rcenter.jpg'"（用框架的绑定语法，避免路径解析异常）
4. 清理项目缓存：缓存可能导致资源加载异常，运行以下命令后重启服务：

   ng clean
   ng serve
   

5. 排除样式干扰：虽然SCSS一般不会引发img标签报错，但可以临时注释掉组件的SCSS文件，看看报错是否消失，排除样式冲突的可能。

内容的提问来源于stack exchange，提问作者hasini ishara