How do I copy the directory structure into the text of a file?

Question

This might be more of a bash question than vim, but I thought I should start here. Frequently when editing code, it would be "nice" to copy and paste the directory structure into a text editor. For example:

I have the following directory structure:

img/foo.jpg
img/foo2.jpg
img/Another_foo.jpg

I'm editing a file with the following code:

<img src="img/foo.jpg">
<img src="img/foo2.jpg">
<img src="img/Another_foo.jpg">

I add more files to the img directory so that it looks like this:

img/foo.jpg
img/foo2.jpg
img/Another_foo.jpg
img/bar.gif
img/bar2.jpg
img/Another_bar.png

In graphical editing environments, I would just copy and paste the filenames into the file and quickly get this:

<img src="img/foo.jpg">
<img src="img/foo2.jpg">
<img src="img/Another_foo.jpg">
<img src="img/bar.gif">
<img src="img/bar2.jpg">
<img src="img/Another_bar.png">

(For larger filesets, I hack my way through by pasting the directory structure into Excel and then concatenating the code for each line).

Is there an easily-reproducible way to do something similar with vim?

Answer 1

First step, insert the file listing:

:r!ls

Second step, turn each line into an HTML tag:

:'[,s/.*/<img src="&">

See :help :r, :help range, :help mark-motions, and :help :s.