# 设置特色图片而不将其发布在主题中
**URL:** https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232
**Category:** Support
**Created:** [2025年八月4日 15:19 UTC](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232 "2025-08-04T15:19:01Z")
**Posts on this page:** 5
**Page:** 2
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2025年八月5日 12:40 UTC](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232/21 "2025-08-05T12:40:31Z")
我认为通常名称会添加到 alt 属性中。当我上传文件时，名称通常会添加到 markdown 中的大小前面，而这部分会被“alt”使用。
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年八月5日 12:49 UTC](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232/22 "2025-08-05T12:49:45Z")
由于我不是 CSS 专家，我向 ChatGPT 询问了您的选项，并得到了这个答案。我想隐藏以 `hide-this-image-` 开头的图片，但后面还有其他内容。我得到的答案是：
不， **纯 CSS 不支持 `alt` 属性的通配符或“开头是”选择器** 。
CSS 属性选择器仅支持：
- 精确匹配：`[alt="value"]`
- 包含单词：`[alt~="value"]`
- 包含子字符串：`[alt*="value"]`
- 开头是：`[alt^="value"]`
- 结尾是：`[alt$="value"]`
但是，`alt^="hide-this-image-"` 在您的示例中将无法可靠工作，因为 **CSS 无法在所有浏览器中匹配渲染图像时的 `![]()
` 的 `alt` 属性** ，尤其是在 Discourse 等系统中，因为 `alt` 属性不一定以 CSS 可以访问的方式反映在 DOM 中。
### 使用 CSS 的解决方法（仅在某些环境中有效）：
```css
.cooked img[alt^="hide-this-image-"] {
display: none;
}
```
但同样， **这在 Discourse 中可能无法一致工作** ，因为图像的渲染方式（例如通过 markdown 或 JS）。在这种情况下，您需要 **JavaScript** 。
### JavaScript 可靠的替代方案：
```js
document.querySelectorAll('.cooked img[alt^="hide-this-image-"]').forEach(img => {
img.style.display = 'none';
});
```
这将在包括 Discourse 在内的所有环境中可靠地工作。
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年八月5日 12:56 UTC](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232/23 "2025-08-05T12:56:02Z")
ChatGPT 的解决方案似乎奏效了：
Facebook Debugger 也将其识别为特色图片：
带有 Javascript 的组件：
```javascript
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.onPageChange(() => {
document
.querySelectorAll('.cooked img[alt^="featured-image-"]')
.forEach((img) => {
const parent = img.closest("div");
if (parent) {
parent.style.display = "none";
} else {
img.style.display = "none";
}
});
});
});
```
> 我注意到它在图片本应在的位置保留了一些空间，所以我再次询问 ChatGPT，它补充说需要隐藏父容器，在这种情况下是 `` 标签。
现在运行得很棒！
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年八月5日 12:57 UTC](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232/24 "2025-08-05T12:57:54Z")
谢谢。已添加到我的笔记中。
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2025年九月4日 12:58 UTC](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232/25 "2025-09-04T12:58:19Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
[上一頁](https://meta.discourse.org/t/set-featured-image-without-posting-it-in-the-topic/377232.md?page=1)