JavaScript如何改變src路徑

# JavaScript如何改變src路徑

## 引言

在前端開發中，動態修改HTML元素的`src`屬性是常見的交互需求。無論是圖片輪播、視頻切換還是動態加載腳本，掌握JavaScript修改`src`路徑的技巧都至關重要。本文將深入探討多種實現方式、應用場景及注意事項。

---

## 一、基礎方法：直接修改src屬性

### 1.1 通過getElementById獲取元素
```javascript
const img = document.getElementById('myImage');
img.src = 'new-image.jpg';

1.2 使用querySelector

document.querySelector('.banner-img').src = 'banner-v2.png';

1.3 修改多個元素的src

document.querySelectorAll('.gallery img').forEach((img, index) => {
  img.src = `gallery-${index + 1}.webp`;
});

二、動態路徑拼接技巧

2.1 基于時間切換路徑

const video = document.getElementById('intro-video');
const isDaytime = new Date().getHours() > 6 && new Date().getHours() < 18;
video.src = isDaytime ? 'daytime.mp4' : 'nighttime.mp4';

2.2 響應式圖片路徑

function updateResponsiveImage() {
  const screenWidth = window.innerWidth;
  const img = document.getElementById('hero-img');
  img.src = screenWidth > 768 ? 'desktop.jpg' : 'mobile.jpg';
}

window.addEventListener('resize', updateResponsiveImage);

三、特殊元素的應用

3.1 修改iframe的src

document.getElementById('map-iframe').src = 'https://maps.example.com/new-location';

3.2 動態加載JavaScript文件

const script = document.createElement('script');
script.src = 'dynamic-module.js';
document.body.appendChild(script);

3.3 視頻源切換（video標簽）

<video controls>
  <source id="video-source" src="default.mp4" type="video/mp4">
</video>

<script>
  function changeVideo(quality) {
    const source = document.getElementById('video-source');
    source.src = `${quality}-quality.mp4`;
    document.querySelector('video').load(); // 必須重新加載
  }
</script>

四、進階應用場景

4.1 圖片懶加載實現

function lazyLoad() {
  document.querySelectorAll('img[data-src]').forEach(img => {
    if (img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoad);

4.2 配合URL對象動態生成路徑

const baseURL = new URL('https://cdn.example.com');
const img = document.getElementById('product-img');

function updateProductImage(productId, variant) {
  baseURL.pathname = `/products/${productId}`;
  baseURL.searchParams.set('variant', variant);
  img.src = baseURL.toString();
}

五、常見問題與解決方案

5.1 路徑緩存問題

// 添加時間戳避免緩存
img.src = `profile.jpg?t=${new Date().getTime()}`;

5.2 路徑錯誤處理

img.onerror = function() {
  this.src = 'fallback-image.png';
  console.error('Failed to load image:', this.src);
};

5.3 安全性考慮

// 驗證URL安全性
function setSafeSrc(element, url) {
  if (url.startsWith('https://trusted-domain.com/')) {
    element.src = url;
  } else {
    console.warn('Untrusted domain blocked');
  }
}

六、性能優化建議

1. 預加載策略：修改src前預加載資源

   const preloadImg = new Image();
   preloadImg.src = 'heavy-image.jpg';
   preloadImg.onload = () => {
    document.getElementById('main-img').src = preloadImg.src;
   };
   

2. 使用srcset替代（針對響應式圖片）

   <img src="default.jpg" 
       srcset="small.jpg 480w, medium.jpg 768w"
       sizes="(max-width: 600px) 480px, 800px">
   

3. WebP格式檢測：

   const supportsWebP = document.createElement('canvas')
    .toDataURL('image/webp').indexOf('data:image/webp') === 0;
   img.src = supportsWebP ? 'image.webp' : 'image.jpg';
   

結語

通過JavaScript動態修改src路徑是實現現代Web動態交互的核心技術之一。開發者需要根據具體場景選擇合適的方法，同時注意處理加載狀態、錯誤回調和性能優化。隨著Web技術的演進，結合Service Worker、Intersection Observer等API可以實現更高級的路徑控制策略。

關鍵點總結：
- 掌握基礎DOM操作方法
- 理解不同媒體元素的加載特性
- 重視路徑安全驗證
- 優化資源加載性能 “`

該文章包含代碼示例、應用場景和實用建議，總字數約1100字，采用Markdown格式編寫，可直接用于技術文檔或博客發布。