将文本注入“url”;img标签的一部分

Injection text into "URL" part of img tag

本文关键字：img 标签 一部分 文本 注入 url      更新时间：2023-09-26

我有一个这样的URL: http://website.com/~user/wordpress_site/wp-content/uploads/2016/08/logo.png

我想做的是，当屏幕小于768px宽时，我可以改变url，将"logo.png"改为"mobile-logo.png"。

是否有一个类似于"PHP爆炸"的功能，我可以针对标志部分，并将其替换为"移动标志"?

问题是URL是动态的，所以如果我说我想在10个字符之后添加单词"mobile"，它可能无法工作，因为URL会改变，所以它会把它放在错误的位置。

是否有一点javascript/jQuery简单地做到这一点?非常感谢

你可以使用css。只需使用两个<img>来解决这个问题，如下所示:

HTML: 

<img class="show-on-desktop" src="http://website.com/~user/wordpress_site/wp-content/uploads/2016/08/logo.png" />
<img class="show-on-mobile" src="http://website.com/~user/wordpress_site/wp-content/uploads/2016/08/mobile-logo.png" />
CSS: 

.show-on-mobile{
    display: none;
}
@media only screen and (max-width: 768px){
    .show-on-desktop{
        display: none;
    }
    .show-on-mobile{
        display: block;
    }
}

工作示例:https://jsfiddle.net/5kb6ndsp/

我肯定会在服务器端做这种处理，但如果你必须在客户端做，这里有一个简单的jQuery语句来做

$("img").each(function(i, img){
    var originalLink = $(img).attr("href");
    var fileName = originalLink.split("/").slice(-1)[0];
    $(img).attr("href", originalLink.replace(fileName, "mobile-" + fileName));
    console.log($(img).attr("href"));
});
相关文章：