英文:
How to insert an image in my post on Hugo?
问题
这是我在Hugo博客上的存储库:
我想在一篇文章中插入一张图片,使用以下文本:

然而,图片没有显示出来,并显示了404错误-页面未找到。
我在这里做错了什么?
英文:
Here is my repository on my Hugo blog:
I'd like to insert an image to a post with the following text:

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/
目录中。然后使用斜杠引用图片文件,例如:

选项2:使用子目录来保存markdown文件和相关资源。
- 创建一个目录
post/creating-a-new-theme
- 将现有的markdown文件移动到该目录中,并将其重命名为
index.md
- 创建一个子目录
post/creating-a-new-theme/images
,并将图片移动到其中 - 引用图片的方式为

有关选项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.:

Option 2. Use sub-directories to hold the markdown file and any related resources.
- create a directory
post/creating-a-new-theme
- move your existing markdown file into that directory, and rename it to
index.md
- create a subdirectory
post/creating-a-new-theme/images
and move your images in there - reference the image as

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中使用它,例如
或者如果您不想建立一个帖子文件夹,可以使用
。
如果您搜索hugo文档,您可以找到图像处理 | Hugo
但是!这不是插入图像的markdown方式。如果您没有错过入门指南,您会发现static目录,它说可以存储图像,就是这样!
[static](https://gohugo.io/content-management/static-files/)
存储所有静态内容:**图像**,CSS,JavaScript等。当Hugo构建您的站点时,静态目录中的所有资源都会按原样复制。使用静态文件夹的一个很好的例子是在Google搜索控制台上验证站点所有权,您希望Hugo复制一个完整的HTML文件而不修改其内容。
如何使用它
将您的图像放在静态目录中,就像下面这样,在markdown中使用它,例如
或者如果您不想建立一个帖子文件夹,可以使用
。
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 
or 
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 
or 
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/
目录下,因此这成为了一个全局的图片资源,我可以在文章或页面中添加如下:

英文:
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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论