在 .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 的元素中添加自己制作的占位符的函数），等等您可以将图像添加到占位符。