程序员经验分享-hwhale

图像路径在 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(使用前将#替换为@)

html

css

image

angular

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

  • 如何将电子邮件类型的输入应用到 Asp.net MVC3 Razor 中的 HTML Helper

    如何将电子邮件类型的输入应用到 Asp net MVC3 Razor 中的 HTML Helper 例如

  • Angular2模板div点击检查元素是否有类

    我目前有一些逻辑 如果可能的话 我想仅使用 html 模板来简化 单击 我有一个可折叠的 div 单击时会变为 活动 目前我的 div 是 div class collapsible header blue darken 2 然后我检查元素

  • Angular2 - 使用路由器出口名称时路由不起作用

    我试图为路由器插座命名 但它不起作用 这是完美运行的基本路由 路由模块 NgModule imports RouterModule forChild path admin component AdminComponent children

  • 除非我在 HTML 中使用 标签加载图像，否则背景图像不会显示在 CSS 中

    我非常困惑为什么我的代码无法正确显示图像 这是我的代码 div p p div 只有图像的一小部分与文本一起显示 我很困惑为什么会发生这种情况 显示整个图像的唯一方法是在图像周围添加近 170 像素的填充 请有人帮忙 Thanks 你之前需

  • 更改链接悬停时的正文背景颜色

    当鼠标悬停在页面上时如何更改页面背景a 我正在寻找仅 css 的解决方案 我知道你可以通过 css 到达子元素 但我不知道如何 是否可以到达主体 看看这个DEMO http jsfiddle net bhavuksuthar bjsvhze

  • 单值或常量值时在 x 轴上绘制的样条图 - highchart

    while using the older version of highchart 2 1 6 if a plot had only one value or a series of same values it would plot a

  • CSS 中的 * 有什么作用？

    明星是做什么的 这叫什么 对我来说 这是某种通配符 它叫什么名字 以便我可以阅读它 div zoom 1 this zoom 1 display inline display inline and this whats the differ

  • Firefox：如何测试首选颜色方案？

    在 Firefox 67 中 可以使用媒体查询来检测用户对浅色或深色主题的偏好 https davidwalsh name demo prefers color scheme php 在我的 Firefox 版本 在 Ubuntu 下 中

  • Angular 6 / Rxjs - 如何基础知识：可观察到的成功、错误、最后

    我正在最新的 Angular 6 上构建一个架构 并且来自 AngularJS 有一些事情我无法平静 HTTP 请求的基本处理 因此 为了这个问题 假设我想要一个可观察的 因为它似乎是 Angular 的未来 我从 AngularJS 中的

  • 从服务器下载图像（cUrl，但接受建议）C++

    我试图通过从服务器 网站 下载图像来设置旋转背景图像 并尝试使用curl 来执行此操作 但是在执行此操作方面取得了0 成功 我的代码的 缩短的 版本如下 我没有收到错误 但是 如何 临时 保存该图像以将其显示为背景 是否有图像 类型变量 或

  • 带 CSS 网格的等宽侧边栏列

    是否可以让左右列具有相同的宽度 而中间列占据剩余空间 我不想设置像这样的百分比grid template columns 20 60 20 因为并不总是确定这些列的内容是什么 Flexbox 和表格似乎没有解决这个问题的方法 所以我再次尝试

  • 点击问题：动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li

  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面

  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3

  • Excel 类似 HTML 表格，可在 x 轴（完整表格）和 y 轴（标题固定）上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关

  • 使用文本遮盖视频

    是否可以使用 HTML CSS 文本来屏蔽视频 我已经找到并设置了这种工作方式 但没有一种允许文本后面有透明背景 例如 这支笔要求您进行某种填充 它并不是真正掩盖实际视频 而是创造幻觉 https codepen io dudleystor

  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di

  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高

  • 从 Angular2 模块导出时遇到问题

    我是 Angular 2 的初学者 我试图了解如何从功能模块导出类 并将其导入到我的主模块中 当我尝试在打字稿中编译它时 我收到以下两个错误 app app component ts 11 21 错误 TS2304 找不到名称 添加服务 a

  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne

随机推荐

  • 基于在线 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 文档中尝试了以下

热门标签