英文:
How to insert an image in my post on Hugo?
问题
这是我在Hugo博客上的存储库:
我想在一篇文章中插入一张图片,使用以下文本:
![Scenario 1: Across columns](content/post/image/across_column.png)
然而,图片没有显示出来,并显示了404错误-页面未找到。
我在这里做错了什么?
英文:
Here is my repository on my Hugo blog:
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文件和相关资源。
- 创建一个目录
post/creating-a-new-theme
- 将现有的markdown文件移动到该目录中,并将其重命名为
index.md
- 创建一个子目录
post/creating-a-new-theme/images
,并将图片移动到其中 - 引用图片的方式为
![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.
- 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
![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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论