Question

在组件的目录中，放置了一个图像。这是一个很好的，古老的，带有徽标的普通PNG。因此，其中有四个文件：

blobb.png
blobb.comp.ts
blobb.comp.html
blobb.comp.scss

在HTML文件中，我在这样的默认IMG标签中使用了静态源链接。

useEffect(() => {
    const fetchData = async () => {    
    let completedJobsArray = props.completedJobs;
    let queryData = {completedJobsArray};

    const settings = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json; charset=utf-8'},
      body: JSON.stringify(queryData)
    };

    try {
      const fetchResponse = await fetch(`/api/brief/brief-array`, settings);
    const returnedData = await fetchResponse.json();
    setData(returnedData);
    } catch (error) {
      console.error("error: ", error);
    }
  }
  fetchData();
}, []);

我正在尝试遵循this blog中建议的设置。目前，我不需要动态图像。静态的就足够了。我的理解是资产文件夹是一个选项，但不是必需的。

当然没有错误，除了“ 404 Not Found”。到丢失文件的链接是：

https://localhost:44385/logo02.png

我不确定如何推断到图像文件的链接错误还是无法访问该文件。我该如何进一步诊断？

Answer 1

您需要将图像放在资产文件夹中，然后像这样在您的html中引用

<img src="assets/img/logo.png">

您需要执行此操作，因为cli会编译并捆绑您的应用程序，它也会同时捆绑您的资产，并且在捆绑过程中映像路径可能会更改。

查看此link for an example

无法在与Angular中的组件相同的文件夹中显示静态图像

1 个答案: