请原谅我在这方面的无知。我如何在HTML / CSS / JAVASCRIPT中将图像插入预先格式化的文本/字符串中，给定如下字符串，其中字符串中的键表示图像放置？
Please insert into me <here> and <here>.
答案 0 :(得分：2)
一种干净的方法是创建自己的spritesheet，然后创建元素来保存图像。
修改： 如果您还需要动态地通过纯js进行替换，这里只是一个简单的JavaScript fiddle example。
我也把这个例子放在这里：我们定义了唯一标签的外观（这是一个简单的标签），然后创建正则表达式以匹配它。使用替换方法，我们使用我们想要的html搜索并替换全局 / g ，并使用替换结果更新我们的元素。
(function () {
"use strict";
function replaceTagWithImage() {
var element = document.getElementById("my-paragraph"),
icon = '<i class="icon-foo"></i>',
iconTag = /\{image\}/g;
element.innerHTML = element.innerHTML.replace(iconTag, icon);
}
replaceTagWithImage();
}());.icon-foo {
display: inline-block;
width: 100px;
height: 20px;
background-image: url("http://placehold.it/350x150");
background-position: 0 0;
}<p id="my-paragraph">Please insert into me {image} and {image}.<p>
AngularJS示例 - 两种方法 - 指令一优选。：
var myApp = angular.module("myApp", []);
myApp.controller("MainController", ["$scope", "$sce",
function($scope, $sce) {
$scope.myImage = $sce.trustAsHtml('<i class="icon-foo"></i>');
}
]);
myApp.directive("myImg", function() {
return {
restrict: "E",
replace: true,
template: '<i class="icon-foo"></i>'
};
});.icon-foo {
display: inline-block;
width: 100px;
height: 20px;
background-image: url("http://placehold.it/350x150");
background-position: 0 0;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title>Angular example</title>
</head>
<body>
<div>
<div ng-controller="MainController">
<p>Please insert into me <my-img></my-img> and <my-img></my-img>.</p>
<br />
<p>Inserting html from controller: <span ng-bind-html="myImage"></span></p>
</div>
</div>
</body>
<html>
静态CSS / HTML示例：
.icon-foo {
display: inline-block;
width: 100px;
height: 20px;
background-image: url("http://placehold.it/350x150");
background-position: 0 0;
}Please insert into me <i class="icon-foo"></i> and <i class="icon-foo"></i>.
答案 1 :(得分：1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
img {
display: inline-block;
}
</style>
</head>
<body>
<p>Please insert into me <img src="your image source" alt="Your Image"> and <img src="your image source" alt="Your Other Image" >. </p>
</body>
</html>
答案 2 :(得分：1)
我想您必须使用唯一的单词或短语格式化文本，然后将该单词替换为图像代码。
正如@Jaxo所说。
Please insert into me [Img1] and [Img2].
然后使用javascript将[Img1]和[Img2]替换为代码。