Search code examples
htmlimagehyperlinktags

how to change image link in "a" tag to <img>


One of the WordPress plugins renders the uploaded image as a link:

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" target="_blank" aria-label="new">news-paper.png</a>

I want to convert it to an tag with JavaScript so that the link is displayed as an image


Solution

  • Not super familiar w/ Wordpress so there may be an easier way, but you could convert that link into an image by...

    • Changing the <a ... tag to an <image ... tag :

    <image src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" target="_blank" aria-label="new"/>

    • adding an image via JS based off that value

        function add_google_logo() {     show_image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", 276,110, "Google Logo");
        }
    
    
        function show_image(src, width, height, alt) {
            var img = document.createElement("img");
            img.src = src;
            img.width = width;
            img.height = height;
            img.alt = alt;
            document.body.appendChild(img);
        }
    <button onclick="add_google_logo();">Add Google Logo</button>
    ^ completely ripped from this post: How to display image with JavaScript?