Я хотел бы изменить внутренние ссылки img src на внешние ссылки - PullRequest
Новая
       1

Я хотел бы изменить внутренние ссылки img src на внешние ссылки

0 голосов
/ 16 января 2019 
<div class="view-content">
<img src="/img/img_01.png">
<img src="/img/img_02.png">
<img src="/img/img_03.png">
</div>

Если я хочу изменить это на 

<div class="view-content">
<img src="http://example.com/img/img_01.png">
<img src="http://example.com/img/img_02.png">
<img src="http://example.com/img/img_03.png">
</div>

Вот так с использованием javascript или php str replace Как я могу это сделать. 

var count = $('.view-content img').length; 
var url = window.location.hostname;
for(var i=0;i<count;i++){
  var imgurl = $('.view-content').eq(i).attr('src'); 
  $('.view-content img').eq(i).append(url+'/'+imgurl);
}

Я уже пробовал этот код, но он совсем не работает

Ответы [ 5 ]

0 голосов
/ 16 января 2019

И если вам нужен новый базовый URL для всех ссылок на странице, вы можете полностью избежать JS и использовать элемент <base>.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

0 голосов
/ 16 января 2019

как насчет простого переключения вручную в js с идентификаторами? 

document.getElementById("1stPic").src="https://cdn.pbrd.co/images/HS0VtcX.jpg";
0 голосов
/ 16 января 2019

Может быть, этот фрагмент может помочь, все, что я сделал, это перебрал элементы img; схватил SRC и сохранил во временную переменную; добавлен http: // domain + src как новый атрибут источника. 

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>

    <!-- Page Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h1 class="mt-5">Test</h1>
            <img src="/img/img_01.png">
            <img src="/img/img_02.png">
            <img src="/img/img_03.png">
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script>
        $("img").each(function(){
          var src = $(this).attr('src');
          $(this).attr('src', 'http://www.blah.com' + src);
        })
    </script>
  </body>

</html>
0 голосов
/ 16 января 2019

Вариация на тему возможно 

let host='http://example.com/';
let col=document.getElementsByTagName('img');
col.forEach( img =>{
    if( !~img.src.indexOf( host ) )img.src = host + img.src;
});
0 голосов
/ 16 января 2019

Вы можете использовать такой простой скрипт для добавления http в начале ваших параметров src для каждого изображения. 

const images = document.querySelectorAll('.view-content img')
images.forEach(item => {
  const src = item.getAttribute('src');
  const newSrc = 'http://example.com' + src;
  item.setAttribute('src', newSrc);
})
<div class="view-content">
<img src="/img/img_01.png">
<img src="/img/img_02.png">
<img src="/img/img_03.png">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...