如何在工具提示中显示图像(引导程序5)/错误304

Question

我正在使用Bootstrap 5。

我有一个tooltip，我想在其中显示一个文本(工作正常(和一个图像，所以我使用了data-bs-html="true"。

我的输入(包括我的tooltip(如下所示：

<input
class="form-control tooltip-element"
data-bs-placement="right"
data-bs-html="true"
title="Test title.<br><img src='../assets/picture.png'>"
/>

当我转到Network时，我将始终获得ERROR 304，因为文件将在缓存中丢失。

我该如何解决这个问题？提前感谢！

信息：路径和所有值/定义都是正确的。

Answer 1

我认为这是关于img.src的。我确实在这里创建了一个示例。您可以将鼠标悬停在输入上，图像将在一段时间后显示

<input
id="example"
class="form-control tooltip-element"
data-bs-placement="right"
data-bs-html="true"
title="Test title.<br><img src='https://picsum.photos/200/300'>"
/> 

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body,
// read more at https://getbootstrap.com/docs/5.0/components/tooltips/#options
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'// or document.querySelector('#boundary')
})