PHP search & replace img src

Question

Ok, the situation is simple (i hope!)

I am working locally (xampp) and in my .php file i've got the following img elements :

<img src="http://example.com/images/project-1/image1.jpg"/>
<img src="http://example.com/images/project-1/image2.jpg" />
<img src="http://example.com/images/project-1/image3.jpg" />

How can I make it to run a search and replace function (with php if possible) that will fulfil the following:

1) On page load to scan the whole document and find all the above images that don't appear (broken links)

2) IF from the above we find broken images , then to replace only the part that says "http://example.com" with "http://127.0.0.1/projectfile".

So what I want is to scan the whole document for broken images and if I find x of them then to replace the src from this:

src="http://www.example.com/images/project-1/image1.jpg"

with this:

src="http://127.0.0.1/project/images/project-1/image1.jpg"

I want to do this for all the images automatic, and not manually.

Currently I am struggling to do this with jQuery but I probably I am gonna need PHP because I need to navigate to the previous folders,scan dir etc etc

Thank you for you support! Any ideas or tips?

So far what I tried and succeeded partially as I said above is to search/replace with jQuery:

$('img').attr('src',function(i,e){
    return e.replace("http://example.com","http://127.0.0.1");
})

,which ignores the live website src folder and sticks directly to the local folder but I need to make it a bit more clever :)

What is the reason you want to do this? The reason makes it clearer if you should use server-side (php) or clientside (javascript/jquery) — bestprogrammerintheworld
I would consider using .htaccess for this - if it is an Apache server. It would very clearly and fast and automatically redirect to the existing image if the link doesn't end at the real file. See this (of course you need some changes to make it work with image files etc..): stackoverflow.com/questions/5190206/… — smozgur
How are the images created? Is it possible to check if they exist and replace when they are created? — bestprogrammerintheworld
Hi! Thank you for your swift reply! The reason I want to do this is because I am working on a live website right now with lots of pages and also lots of broken image-links. All the img src from the live files are relevant "/images/something/image.jpg" and because I have to work offline (uploading new images on the server is a pain..long story..) I want to make sure somehow that my offline file will be able to "drag" the live images from the live website first, and if not then i should create a subdirectory/filepath offline (and later online) with the new image file that needs to be put there — devio

Nadeem Manzoor Nadeem Manzoor · Accepted Answer · 2016-02-21T18:06:58

Use jquery error event to detect missing images and replace them. Following code should do the trick

$(document).ready(function(){
  $('img').on('error',function(){
    // Avoid endless loop for noexistant images
    if($(this).data('alreadyChecked')) return; 
    $(this).data('alreadyChecked',true);
    
    //Replace src
    $(this).attr('src', $(this).attr('src').replace("http://example.com","http://127.0.0.1"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://example.com/images/project-1/image1.jpg"/>
<img src="http://example.com/images/project-1/image2.jpg" />
<img src="http://example.com/images/project-1/image3.jpg" />

PHP search & replace img src

4 Answers