For starters, you're using the wrong operator to concatenate strings in PHP. I think you mean this:
$picurl1 = '<img src="./pictures/' . $pic1 . '.png'">';
More to the point, what is "definition of pic1"? Do you mean that the code in pic.js
will randomly choose a file name, and you want its result to be the URL used in the img
tag?
The problem you're encountering, then, is that PHP runs on the server while JavaScript runs on the client. So your PHP code can't use the result of pic.js
because it won't have a result until the browser runs it, after the PHP code is done.
So you need to get that result client-side in JavaScript code.
How does pic.js
create that result? That is, is there a function in pic.js
? For now I'm going to assume there is, and I'm going to assume that function is called something like getFileName
. (Just for the purpose of this example.)
After you included the JavaScript code, and after the img
tag is in the document, you can call that function and set the src
of the img
tag to its results. To help us identify the img
tag, let's give it an id
:
<img src="default.gif" id="theImage" alt="This is a dynamic image" />
(I gave it a default value for the src
since an empty value is invalid. I also have it an alt
value for completeness.) To change its src
value to the result of a function, you'd do something like the following:
document.getElementById('theImage').src = getFileName();
Remember, this is all client-side code. The only way you can use the "result" in PHP code is if the calculation is done in PHP, not in JavaScript.