How to implement a text field formatter that renders a URL as the image? If a node has a text field with the url of an image as its value, how can I render this field as the image?

The image does exists it will be given the image url. I have to write that url into the text field. 

Now using this url the value of this field should be an image when the node is viewed. But should be again editable textfield when editing the node.

And if in case the image doesn't exits a string can be shown "no image available".
You can follow the Drupal.org example on creating a custom Field Formatter. Inside the viewElements function, you can add an if statement to check if the remote file exist. If it does, assign the url to the markup. If not, assign some text:

viewElements(FieldItemListInterface $items, $langcode) {
    $element = [];

    foreach ($items as $delta =&gt; $item) {
        $file = $item-&gt;value;
        $file_headers = @get_headers($file);
        if(!$file_headers || $file_headers[0] == 'HTTP/1.1 404 Not Found') {
            $url = Url::fromUserInput($file);
            $markup = "&lt;img src={$url-&gt;toUriString()} \&gt;";
        }
        else {
            $markup= "File Not Found";
        }
      // Render each element as markup.
      $element[$delta] = ['#markup' =&gt; $markup];
    }

    return $element;
  }


Part of this answer is from stackoverflow.
I have not tested this, but it should be close.