Insert image inline text in HTML
Question
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?
Please insert into me <here> and <here>.
3 answers
solution1
2 ACCPTED 2015-02-19 19:27:07
One clean approach would be to create your own spritesheet, and then create elements to hold your images.
EDIT : If you also need to do replacement via pure js dynamically, here's a simple JavaScript fiddle example .
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.
(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.:
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:
.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>.
solution2
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>
solution3
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.
Please insert into me [Img1] and [Img2].
Then use javascript to replace [Img1] and [Img2] with the code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.