部署到 Github Pages 后不显示角度图像

Question

I'm new to Angular. I recently deployed a sample webpage to Github Pages. I was successful at deploying but images that are visible on localhost are not showing up. Instead, I'm getting a 404 logged on the console.

This is the component containing the img :

home.component.html:

<div>
    <img src='assets/images/birthday.jpg' alt='Happy Birthday' width="385px"/>
</div>

My directory structure is:

   |src
   |--app
   |--assets
    |---images
     |----birthday.jpg

The directory structure in the dist folder is:

   |dist
   |--happy-birthday
    |--assets
     |---images
      |----birthday.jpg

I'm deploying using angular-cli-ghpages package. My Angular version is 10.0.14 .

Answer 1

尝试使用/assets/images/birthday.jpg 。

Answer 2

尝试明确给出一个相对路径（ img相对于home.component.html路径）下面给出了一个例子，但是这可能会根据您的目录结构而改变。

<div><img src='../assets/images/birthday.jpg' alt='Happy Birthday' width="385px"/></div>

Answer 3

I just tried without the leading slash and it worked: src='assets/images/birthday.jpg' .