implode - URL doubling - image display error

Question

Trying to display the avatar(image) from a folder already stored using a form.

Error: image not displayed. I found the URL doubled in the inspect element:

----------inspect element--------------------------

background-image: url(http://phpstack-130512-487107.cloudwaysapps.com/site/http%3A//phpstack-130502-487107.cloudwaysapps.com/site/components/com_jux_testimonial/uploads/5ad865a54354a-seyaligal-LOGO.jpg);

----------inspect element--------------------------

Edited the inspect element code and checked.

----------inspect element edited--------------------------

background-image: url(http://phpstack-130502-487107.cloudwaysapps.com/site/components/com_jux_testimonial/uploads/5ad865a54354a-seyaligal-LOGO.jpg);

----------inspect element edited--------------------------

It is now displaying the image.

Screen shot attached.

Please advice as to how to debug this issue.

Thanks in advance.

With warm regards, Venkat Chinniah

three screen shots merged and attached as one picture

Code Part 1:

<div class="avatar-testimonial">
<?php
if ($userNameEffects == 1) {
    if ($useGravatar && $item->jux_gravatar) {
        echo '<div class="user_avatar_rotate avatar' . $column . '" style="background-image: url(' . $item->jux_gravatar . '); "></div>';
    } else if ($item->jux_avatar) {
        $jux_avatar = $item->jux_avatar;
        echo '<div class="user_avatar_rotate avatar' . $column . '" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $jux_avatar))) . '); "></div>';
    } else {
        echo '<div class="user_avatar_rotate avatar' . $column . '" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $juxAvatarDefault))) . '); "></div>';
    }
    ?>
    <?php
} else {
    if ($useGravatar && $item->jux_gravatar) {
        echo '<div class="user_avatar" style="background-image: url(' . $item->jux_gravatar . '); "></div>';
    } else if ($item->jux_avatar) {
        $jux_avatar = $item->jux_avatar;
        echo '<div class="user_avatar" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $jux_avatar))) . '); "></div>';
    } else {
        echo '<div class="user_avatar" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $juxAvatarDefault))) . '); "></div>';
    }
    ?>
<?php }
?>

Code Part 2:

<div class="avatar-testimonial avatartes<?php echo $column; ?>">
<?php
if ($userNameEffects == 1) {
    if ($useGravatar && $item->jux_gravatar) {
        echo '<div class="user_avatar_rotate avatar' . $column . '" style="background-image: url(' . $item->jux_gravatar . '); "></div>';
    } else if ($item->jux_avatar) {
        $jux_avatar = $item->jux_avatar;
        echo '<div class="user_avatar_rotate avatar' . $column . '" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $jux_avatar))) . '); "></div>';
    } else {
        echo '<div class="user_avatar_rotate avatar' . $column . '" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $juxAvatarDefault))) . '); "></div>';
    }
    ?>
    <?php
} else {
    if ($useGravatar && $item->jux_gravatar) {
        echo '<div class="user_avatar" style="background-image: url(' . $item->jux_gravatar . '); "></div>';
    } else if ($item->jux_avatar) {
        $jux_avatar = $item->jux_avatar;
         echo '<div class="user_avatar" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $jux_avatar))) . '); "></div>';
     } else {
        echo '<div class="user_avatar" style="background-image: url(' . $linkAvatar = JUri::base() . implode('/', array_map('rawurlencode', explode('/', $juxAvatarDefault))) . '); "></div>';
    }
    ?>
<?php }
?>

Answer 1

As a matter of good coding practice, I recommend that you DRY out your code (Don't Repeat Yourself) ...I'm talking "super-dehydrate" like this:

echo "<div class=\"user_avatar" , ($userNameEffects == 1 ? "_rotate avatar$column" : "") , "\" style=\"background-image:url('";
    if ($useGravatar && $item->jux_gravatar) {
        echo $item->jux_gravatar;
    } else {
        echo JUri::base() , implode('/', array_map('rawurlencode', explode('/', ($item->jux_avatar ? $item->jux_avatar : $juxAvatarDefault))));
    }
echo "');\"></div>";

Not only does this greatly reduce code bloat, it reduces the number of places a bug can reside. Frankly, there was just so much redundancy and dot-concatenation that it's no wonder debugging was a chore.

Now with this snippet (which you should use in code #1 and #2) we have:

1. No variable declarations in an echo.
2. No duplicated html elements or function calls.
3. No dot concatenation. I am not merely using commas as a micro-optimization, they send a clearer message to future code readers that data is being printed to the screen and not declared.
4. No chance of a string being appended with a substring of itself.

From this point, it should be much easier to investigate (if not already solved). If the issue persists, we will like to see values for JUri::base() and $item->jux_avatar individually printed to screen.