1

我已经尝试了将图像加载到 rails/angular 应用程序中的 template.html 的所有可能方法，但我的方法都不起作用。我导入了我的模板文件 - 从“./template.html”导入模板；这是我的角度组件的样子

import { Component } from '@angular/core';
import template from "./template.html";
import logo from "../packs/img/logo.png";

@Component({
  selector: 'ms-nav',
  template: template
})
export class NavComponent {}

这是我尝试过的变体列表。logo.png 保存在 /assets/images/logo.png 中的位置，我还在 packs/img/logo.png 中保存了相同的徽标，只是为了看看哪个最终会起作用。

<img src="/assets/images/logo.png" alt="" />在控制台中收到此错误GET http://localhost:5000/assets/images/logo.png 404 (Not Found)

<img src="<%= asset_pack_path 'logo.png' %>" alt="" />在控制台中收到此错误GET http://localhost:5000/%3C%=%20asset_pack_path%20'logo.png'%20%%3E 404 (Not Found)

<img src="<%= asset_pack_path '/img/logo.png' %>" alt="" />-GET http://localhost:5000/%3C%=%20asset_pack_path%20'img/logo.png'%20%%3E 404 (Not Found)

<img src="<%= image_tag('logo.png') %>" alt="" />-GET http://localhost:5000/%3C%=%20image_tag('logo.png')%20%%3E 404 (Not Found)

我什至也尝试过导入徽标，但出现此错误 -template.html?6163:1 Uncaught Error: Cannot find module "./logo"

我不确定这是否是错误的，但我认为这可能是因为

// app/javascript/hello_angular/html.d.ts

declare module "*.html" {
  const content: string
  export default content
}

根据文档，这应该告诉打字稿在遇到 html 文件时不要对它做任何事情。那么既然 typescript 将这个文件中的所有内容都当作一个字符串来处理，那么我们应该如何通过外部模板文件来加载图像呢？

我基本上用完了通过 template.html 文件加载图像的可能方法的变体。

4

0 回答 0