在HTML中插入图像内联文本
[英]Insert image inline text in HTML
问题描述
Please excuse my ignorance in this area. 
请原谅我在这方面的无知。 How may I accomplish inserting an image into a preformatted text/string in HTML/CSS/JAVASCRIPT, Given a string like below where the keys in the string denote image placement? 给定如下所示的字符串，如何将图像插入HTML / CSS / JAVASCRIPT中的预格式化文本/字符串中，其中字符串中的键表示图像放置？
Please insert into me <here> and <here>.
3 个解决方案
解决方案1
2 已采纳 2015-02-19 19:27:07
One clean approach would be to create your own spritesheet, and then create elements to hold your images. 一种干净的方法是创建自己的Spritesheet，然后创建用于保存图像的元素。
EDIT : If you also need to do replacement via pure js dynamically, here's a simple JavaScript fiddle example . 编辑 ：如果您还需要通过纯js动态地进行替换，这是一个简单的JavaScript 小提琴示例 。
I've put the example also here: we define what would unique tag look like (this is a simple one), and then create regex to match it. 我在这里也放置了示例：我们定义唯一标记的外观（这是一个简单的标记），然后创建正则表达式来匹配它。 using replace method, we search and replace globally /g with our desired html, and update our element with replacement result. 使用replace方法，我们用所需的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 example - two approaches - directive one preferable.: 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>
static CSS/HTML Example: 静态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>.
解决方案2
1 2015-02-19 19:26:58
<!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>
解决方案3
1 2015-02-19 19:27:06
I guess you would have to format the text with a unique word or phrase, then replace the word with the image code. 我猜您将不得不使用唯一的单词或短语设置文本格式，然后将单词替换为图像代码。
As @Jaxo said. 正如@Jaxo所说。
Please insert into me [Img1] and [Img2].
Then use javascript to replace [Img1] and [Img2] with the code. 然后使用javascript将[Img1]和[Img2]替换为代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.