javascript - 在 .hbs ember 模板文件的占位符中添加图像

Question

我想将图像添加到 ember 中的 .hbs 模板文件中。我不构建应用程序，我只是想设计基本的待办事项列表应用程序的样式。

<section class='todoapp'>
  <header id='header'>
    <img src="../assets/logo2.png" />
    {{input type='text'
            class='new-todo'
            placeholder='What else is in your wallet?'
            value=newTitle
            enter='createTodo'}}
  </header>

我的目标是在有人单击输入器字段之前在占位符字段旁边添加图像。我假设我无法添加它的值，那么我是否需要对 css 中的 .new-todo 类执行一些操作来将图像放入其中？

Answer 1

使用CSS:

background: url('[url]') no-repeat; background-position: 10px;

调整背景位置像素。

如果你想在元素聚焦时隐藏图像，请在 css 中使用 :focus 并设置 background: none;:

.element-class:hover { background: none; }

也可以在 HTML 中使用 contenteditable 制作一个 div，并在其中您可以从 javascript 创建一个新的占位符函数(在具有 contenteditable 的元素中添加自己制作的占位符的函数)，等等您可以将图像添加到占位符。