图像路径在 Angular 2 中不起作用

2023-12-22

我放在网站上的所有内容都可以正常运行,但是我尝试放入网站的每个图像(背景除外)都会返回一个404 Not Found Error.

我的所有图像都位于“Project/src/assets/images”,并且我在 html 文档中尝试了以下 img 标签。这些文档位于“Project/src/app/tabs”中。

<img src="src/assets/images/image_name.jpg"> 
<img src="/src/assets/images/image_name.jpg">
<img src="./src/assets/images/image_name.jpg">

我使用 css 设置页面的背景图像并且它有效。这是我应用的选择器和属性:

background: url('assets/images/greybackground.jpg') no-repeat center center fixed;

如何将图像添加到 HTML 文档而不出现 404 错误?


您的 html 文件位于“项目/src/应用程序/选项卡”并且您正在尝试从该文件夹进行访问,这就是图像未加载的原因。 所以你需要从tabs文件夹和app文件夹以到达代码和图像的基本目录。 使用../从文件夹中返回。因此,到达基本目录后,只需使用普通目录列表即可。

所以答案是

<img src="../../assets/images/image_name.jpg">
<img src="../../assets/images/image_name.jpg">
<img src="../../assets/images/image_name.jpg">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

图像路径在 Angular 2 中不起作用 的相关文章

  • 为什么我们不应该将块元素放置在内联元素中[重复]

    这个问题在这里已经有答案了 如果我将 div 元素放置在锚元素内 它会使我的 HTML 无效 不将块级元素放置在内联元素内的原因是什么 如果我将 div 元素放置在锚元素内 它会使我的 HTML 无效 从 HTML5 开始 情况并非如此 h
  • 占位符 Internet Explorer 11 未显示

    我在 IE 11 中遇到占位符问题 尽管兼容性表中说 IE 11 可以显示占位符 我不是在谈论专注于输入 当我不关注输入框时也没有占位符 IE版本 11 0 9600 我没有在占位符上应用 CSS 在其他浏览器中显示占位符 我还尝试了使用元
  • Mousemove视差效果移动div的位置

    我正在尝试创建轻微的视差效果 我不确定它是否真的构成视差 但这是一个类似的想法 其中有四层 当鼠标移动时 它们以略有不同的速率移动 我找到了一个很好的例子 它提供了与我想要的类似的东西 http jsfiddle net X7UwG 2 h
  • 使用 CSS 和 JQuery 创建组织结构图结构

    I was checking on stack forum Trees in Twitter Bootstrap https stackoverflow com questions 11167628 trees in twitter boo
  • 错误 102 (net::ERR_CONNECTION_REFUSED):服务器拒绝连接 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我开发了 Facebook 应用程序 它克隆了我网站的注册和登录部分 用户可以通过 Facebook 注册或登录我的网站
  • 自定义 CSS 不适用于 Bootstrap

    首先我想说 我知道我的 HTML 并不是最高效或最干净的 我的问题是我编写的自定义 CSS 根本不适用于我的网页 Bootstrap 似乎工作得很好 但是当我尝试进行任何编辑或覆盖 Bootstrap 时 它完全不起作用 我知道我的自定义
  • Z-Index 不起作用 - 替代技术或修复

    我已为固定位置的菜单栏分配了高 z index 但它仍然出现在我网站上其他元素的下方 是否有我可以使用的替代技术或者我编写的代码有问题 我的有问题的网站是here http ninjawarrior info new 注意 向下滚动后需要向
  • 窗口不是使用 Angular 4 + AoT + Webpack 2 定义的

    我有一个使用 webpack 的 angular4 应用程序 并且一直与 JiT 配合得很好 但现在我试图让它与 AoT 配合使用 但我遇到了问题 具体来说 我收到以下错误 ERROR in window is not defined ER
  • 浏览器会尝试解析 img>

    是否有可能或有可能img标签 或任何其他要解析的 当 lt 标签前面有几个字符 或者可能被省略 这种情况会发生在任何著名的 HTML 解析器中吗 例如 div test div Where test可以是任何包含 gt 但不是一个 lt 例
  • 由javascript创建的css动画[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我试图在按下按钮时创建一个带有 css3 动画计时器的 div 继承人的代码 http jsfiddle net arcco96 y5nov
  • XAMPP 中的根路径

    我遇到这个问题已经有一段时间了 并且广泛寻找答案但没有成功 img src images test jpg 从 根路径 在我的例子中是在 LAMP 中的生产中 获取图像 htdocs images test jpg 无论是从 htdocs
  • 如何获取 CSS 旋转元素的实际(非原始)高度

    我需要获取几个不同元素的实际高度 为了精确的自定义工具提示定位 并且其中一些元素 不是全部 被旋转 elem outerHeight 返回原始高度 而不是实际显示的高度 这是一个非常简单的例子 http jsfiddle net NPC42
  • 重置输入控件的边框颜色 (HTML/Javascript)

    有谁知道使用 javascript 修改输入控件后如何重置它的边框颜色 通过突出显示其中包含不正确或无效数据的字段等来进行验证非常有用 例如 改变边框 document getElementById myinput style border
  • 通过 wp_handle_upload 删除未放入上传文件夹中的图像

    我正在将图像保存到上传文件夹 但我正在使用文件放置内容 http php net manual en function file put contents php代替wp 句柄 上传 https codex wordpress org Fu
  • 更改导航栏悬停时 div 的背景图像

    我正在开发一个项目 我对 Javascript 很陌生 所以我想知道是否有 Jquery 代码或只是一个关于如何使背景图像在导航菜单悬停时更改的过程 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上会将
  • Twitter bootstrap 3 RC2 - IE8 中的导航不起作用

    我正在使用 Twitter Bootstrap 3 RC2 在页面顶部创建一个导航栏 除了在 IE8 中之外 该导航栏工作正常 在 IE8 中 就像浏览器变小一样 因此菜单会折叠以供移动视图使用 但这种情况并非如此 现在我知道 TB3 仍在
  • Webp 和

    我面临一个问题 我似乎无法找出问题是什么 我有
  • 不用AJAX,前台同步拖放文件上传?

    我有一个定期的网站
  • 将参数传递给 Angular2 组件

    我正在学习 Angular2 所以要温柔 我有一个带有字符串数组的基本组件 我想将一个整数传递给该组件并让它返回在该参数的索引处找到的字符串 例如 myComponent number 1 返回字符串 第二个元素 到目前为止我的代码是这样的
  • 如何将现有的 NativeScript Angular 项目转换为代码共享项目

    所有可用的教程都讨论将 Angular Web Apps 转换为代码共享 Nativescript 项目 我想做相反的事情 我几乎用 Nativescript 完成了移动应用程序的编码 现在我想制作一个在两者之间共享代码的 Web 应用程序

随机推荐

  • 基于在线 Apache Web 日志分析器,仅提交原始日志文件 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个来自 Apache 的原始 access log 文件 是否有任何基于网络的版本工具 我可以在其
  • XSLT:如何生成每行 3 个单元格的 HTML 表格

    我按照以下说明生成了一个每行 2 个单元格的 HTML 表格这篇文章来自 StackOverflow https stackoverflow com questions 5387134 xslt and tables setting num
  • 如何使用 F# 语法将 Type 作为属性参数传递?

    FsCheck 允许自定义Arbitrary在其 NUnit 集成中
  • Ruby 中的自然语言处理 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想做一些句子分析 主要针对 Twitter 应用程序 并推断一些一般特征 Ruby 中有针对此类事情
  • 如何在 Perl 中使用 fork() ?

    我的数组中有数百个文件名 我想为数组中的每 4 个文件创建一个子进程 并让该子进程对这 4 个文件中的每一个文件执行一些操作 因此 对于 100 个文件 我将创建 25 个进程 我在理解存在分叉时处理行的顺序时遇到一些困难 我本以为我可以做
  • Audiomanager 和 MediaPlayer 之间的区别

    谁能解释一下有什么区别AudioManager and MediaPlayer在安卓中 如果我是对的 那么AudioManager只能播放音频 而MediaPlayer可以播放音频和视频 但我相信这其中一定还有更多的内容 Thanks Au
  • 如何在 Python 中进行 Obj-C 类别?

    Obj C 我已经很长时间没有使用它了 有一个叫做类别 http macdevelopertips com objective c objective c categories html来延长课程 用新方法声明一个类别并将其编译到您的程序中
  • 如何在 Objective c 中获取当前月份的日期?

    我正在开发一个使用日期 月份 年份的应用程序 我想要当前月份的日期 因为当前月份可以有 28 29 30 31 天 我试图获取当年的月份 但我不知道上面的代码 这是我的代码 NSDateFormatter dateFormatter NSD
  • 使用 ApplicationDbContext 的身份脚手架

    ASP NET Core 2 x 现在将身份页面和逻辑隐藏在库内 为了延长IdentityUser具有新属性的实体并添加 UI 和逻辑来处理这些新属性 我们现在可以运行 身份脚手架 在 MyProject gt 添加 gt 新脚手架项下 很
  • 动态启用/禁用 jquery 可排序项目

    我的表格行可以根据是否选中某些单选按钮进行排序 可排序对象初始化于document ready如下 document ready function Return a helper with preserved width of cells
  • django 中是否有像 Rails 中那样的 before_filter ?

    django中有没有可用的功能 以便我们可以在django视图中对所有操作进行一些过滤 例如rails中可用的 before filter 我仍在学习 Rails 但从我到目前为止观察到的来看 python装饰者 http en wikip
  • GameCenter:endTurnWithNextParticipants 未前进

    在沙盒环境中 我无法将回合制比赛推进到下一个玩家 初始条件 玩家 A 和玩家 B 分别位于设备 A 和设备 B 上 两者都登录到沙箱 双方玩家都可以看到对方的GC状态信息 玩家 A 创建一场比赛并邀请玩家 B 玩家A结束回合 在我的 结束转
  • Tensorflow 错误:FailedPeconditionError:尝试使用未初始化的变量

    我想将立体图像放入优化器中 这是我的代码 tf reset default graph config learning rate 0 5 training epochs 5 init init tf global variables ini
  • 如何动态地将组件作为子组件添加到指令中?

    我一直在尝试 Angular 2 并且我已经能够通过获取现有子组件的 ViewChild 然后使用 ComponentResolver 添加我的动态组件来动态地将一个组件添加到另一个组件的子组件中 但是 如果您无法控制模板 即您动态地将组件
  • 堆叠两个具有不同列名的 SQL 表 (2008)

    我检查了这个网站的代码来堆叠两个表 将一个表的结果放在另一个表的结果下面 其中列名不同 我知道当名称相同时 UNION ALL 可以工作 并且我知道当一个表比另一个表拥有更多信息时 对一个表中缺少的列名进行赋值的 UNION ALL 可以工
  • 在 R Markdown 中跳转到某个块的快捷方式?

    是否有跳转到 R Markdown 中的某个块 在 Mac 上 的快捷方式 我正在寻找一种快速从一个块到另一个块的方法 我不完全确定这在 Mac 上是否可行 但在 Windows 版 RStudio 中 您可以选择在 IDE 中显示 文档大
  • 在nodejs中获取视频分辨率

    我一直试图找到这个问题的答案 但没有真正找到答案 如果这听起来很愚蠢或显而易见 请原谅 我有一个 Nodejs 应用程序 基本上我想简单地获取视频的分辨率 想象一下 我在磁盘上存储了一部影片 我希望能够知道它是 720p 还是 1080p
  • 如何检查Android中的UI线程是否运行? [复制]

    这个问题在这里已经有答案了 如何知道正在运行的代码是否在主线程 UI线程 上执行 对于 Swing 我使用isEventDispatchThread方法 使用Looper getMainLooper getThread 获取UI线程 您可以
  • HTTP_INTERCEPTORS 的 multi: true 属性是什么意思?

    我是 Angular 的新手 刚刚构建了一个拦截器 根据多个教程 您必须包括HTTP INTERCEPTORS in the app module像这样 providers provide HTTP INTERCEPTORS useClas
  • 图像路径在 Angular 2 中不起作用

    我放在网站上的所有内容都可以正常运行 但是我尝试放入网站的每个图像 背景除外 都会返回一个404 Not Found Error 我的所有图像都位于 Project src assets images 并且我在 html 文档中尝试了以下