CODEWITHSUNDEEP
javascripthtmlcssweb
xMythicx
xMythicx

Reputation: 827

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? 

Please insert into me <here> and <here>.

Upvotes: 0

Views: 8614

Answers (3)

NenadP
NenadP

Reputation: 647

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>.

Upvotes: 3

Austin Collins
Austin Collins

Reputation: 451

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.

Upvotes: 1

user2100620
user2100620

Reputation: 331

<!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>

Upvotes: 1

Related Questions