在Hugo中如何在我的文章中插入图片?

huangapple go评论94阅读模式
英文:

How to insert an image in my post on Hugo?

问题

这是我在Hugo博客上的存储库:

在Hugo中如何在我的文章中插入图片?

我想在一篇文章中插入一张图片,使用以下文本:

![Scenario 1: Across columns](content/post/image/across_column.png)

然而,图片没有显示出来,并显示了404错误-页面未找到。

我在这里做错了什么?

英文:

Here is my repository on my Hugo blog:

在Hugo中如何在我的文章中插入图片?

I'd like to insert an image to a post with the following text:

![Scenario 1: Across columns](content/post/image/across_column.png)

However, it does not come out and it gives an error of 404 - Page not found.

What am I making wrong here?

答案1

得分: 22

你在图片链接中有一个拼写错误。你有一个images目录,但是引用的是"content/post/image/...",没有"s"。不过这样做并不能解决你的问题。

有几种方法可以链接图片。

选项1:将所有图片放在static/目录中。然后使用斜杠引用图片文件,例如:

![Scenario 1: Across columns](/across_column.png)

选项2:使用子目录来保存markdown文件和相关资源。

  1. 创建一个目录post/creating-a-new-theme
  2. 将现有的markdown文件移动到该目录中,并将其重命名为index.md
  3. 创建一个子目录post/creating-a-new-theme/images,并将图片移动到其中
  4. 引用图片的方式为![Image alt](images/my-image.jpg)

有关选项2的更多信息,请参考:https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529

更多选项

还有更复杂的方法可以使用frontmatter来引用图片:https://gohugo.io/content-management/page-resources/

英文:

You have a typo in the image link. You have an images directory, but reference "content/post/image/..." without the "s". That won't fix it for you though.

There are a few ways to link images.

Option 1. Put all of your images in the static/ directory. Then reference the image file with a leading slash, e.g.:

![Scenario 1: Across columns](/across_column.png)

Option 2. Use sub-directories to hold the markdown file and any related resources.

  1. create a directory post/creating-a-new-theme
  2. move your existing markdown file into that directory, and rename it to index.md
  3. create a subdirectory post/creating-a-new-theme/images and move your images in there
  4. reference the image as ![Image alt](images/my-image.jpg)

More info on option 2: https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529

More options

There are more sophisticated ways to reference images using the frontmatter, as well: https://gohugo.io/content-management/page-resources/

答案2

得分: 1

TL;DR

将您的图像放在静态目录中,就像下面这样,在markdown中使用它,例如![targets](/images/my_post_folder/my_image.png)或者如果您不想建立一个帖子文件夹,可以使用![targets](/images/my_image2.jpg)


如果您搜索hugo文档,您可以找到图像处理 | Hugo

但是!这不是插入图像的markdown方式。如果您没有错过入门指南,您会发现static目录,它说可以存储图像,就是这样!

[static](https://gohugo.io/content-management/static-files/)

存储所有静态内容:**图像**,CSS,JavaScript等。当Hugo构建您的站点时,静态目录中的所有资源都会按原样复制。使用静态文件夹的一个很好的例子是在Google搜索控制台上验证站点所有权,您希望Hugo复制一个完整的HTML文件而不修改其内容。

如何使用它

将您的图像放在静态目录中,就像下面这样,在markdown中使用它,例如![targets](/images/my_post_folder/my_image.png)或者如果您不想建立一个帖子文件夹,可以使用![targets](/images/my_image2.jpg)

static
└── images
    ├── my_post_folder
    │   ├── my_image.png
    └── my_image2.jpg
英文:

TL;DR

Put your images in the static directory, just like below, use it in markdown like ![targets](/images/my_post_folder/my_image.png) or ![targets](/images/my_image2.jpg) if you don't want to build a post folder


If you search the hugo documentation, you can find Image Processing | Hugo

But! That's no a markdown way to insert an image. If you don't miss the Getting Stated, you will find the static Directory, which says can store images, that's it!

[static](https://gohugo.io/content-management/static-files/)

Stores all the static content: **images**, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.

How to use it

Put your images in the static directory, just like below, use it in markdown like ![targets](/images/my_post_folder/my_image.png) or ![targets](/images/my_image2.jpg) if you don't want to build a post folder

static
└── images
    ├── my_post_folder
    │   ├── my_image.png
    └── my_image2.jpg

答案3

得分: 0

图片支持是通过Hugo Images Module提供的。在我的网站上,例如在config.toml中,我有以下配置:

[module]
  [[module.imports]]
    path = 'github.com/hugomods/images'
    disable = false

我的图片存储在assets/docs/目录下,因此这成为了一个全局的图片资源,我可以在文章或页面中添加如下:

![Resize](/images/docs/whatever.png?width=200px)
英文:

Images support is provided through Hugo Images Module. In my website I have for example in config.toml

[module]
  [[module.imports]]
    path = 'github.com/hugomods/images'
    disable = false

My images are stored in assets/docs/ so this becomes a global image resource that I can than add to a post or page with

![Resize](/images/docs/whatever.png?width=200px)

huangapple
  • 本文由 发表于 2022年3月17日 00:57:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/71501256.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定