快捷導(dǎo)航

Vue3項(xiàng)目使用指令方式修改img標(biāo)簽的src地址的幾種方法

更新時(shí)間：2025年10月12日 11:14:38 作者：1024小神

為了在局域網(wǎng)的pad上添加掃碼功能,需要后端支持https,因此所有靜態(tài)資源鏈接也需轉(zhuǎn)為https,遇到問(wèn)題是Unity游戲不能訪問(wèn)https圖片鏈接,解決方案是后端同時(shí)啟動(dòng)http和https服務(wù),而前端需要將所有圖片鏈接從http轉(zhuǎn)為https,本文提出了幾種方案,需要的朋友可以參考下

因?yàn)轫?xiàng)目要添加一個(gè)新的功能，就是在pad上的網(wǎng)頁(yè)需要打開(kāi)攝像頭掃碼的能力，而且是在局域網(wǎng)訪問(wèn)的，所以就需要后端地址啟動(dòng)在https的地址上，這個(gè)時(shí)候所有的靜態(tài)資源都變成了https鏈接，這個(gè)時(shí)候一個(gè)unity同事在游戲中訪問(wèn)圖片地址的時(shí)候就訪問(wèn)不了，有解決方案，但是要修改的地方有點(diǎn)多，但是掃碼又必須使用https的鏈接，所以備選方案就是后端啟動(dòng)兩個(gè)服務(wù)，一個(gè)http轉(zhuǎn)為給游戲提供http的圖片鏈接，https轉(zhuǎn)為pad提供掃碼能力。

但是這個(gè)時(shí)候問(wèn)題就來(lái)了：pad + server + game 三者之間的通訊是使用proto協(xié)議傳輸?shù)?，其中就包含圖片地址，這個(gè)圖片地址是只有http鏈接字段的，不想再添加一個(gè)https的字段，會(huì)很麻煩，添加的話大家所有人都要修改代碼，這個(gè)就只有我這個(gè)前端自己來(lái)解決了，那就是將所有圖片鏈接中http替換為https，并將端口9091替換為9090，那全局那么多img標(biāo)簽?zāi)兀趺醋觯?/p>

方案1:全局組件替換

創(chuàng)建一個(gè)全局的圖片組建，然后將項(xiàng)目中的所有img標(biāo)簽改成這個(gè)全局組件，不推薦：因?yàn)橐獎(jiǎng)?chuàng)建函數(shù)和全局組件，還要修改項(xiàng)目中所有的img標(biāo)簽，麻煩

<!-- components/SecureImg.vue -->
<template>
  <img :src="secureSrc" v-bind="$attrs">
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  src: String
})

const secureSrc = computed(() => {
  if (!props.src) return ''
  return props.src.replace(/^http:\/\//i, 'https://')
})
</script>

然后在項(xiàng)目中全局注冊(cè)：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import SecureImg from './components/SecureImg.vue'

const app = createApp(App)
app.component('Img', SecureImg)
app.mount('#app')

方案2:使用Vue指令

創(chuàng)建一個(gè)指令，然后將所有img標(biāo)簽的src屬性改為使用指令的方式。這個(gè)時(shí)候要改的就簡(jiǎn)單了，就是全局搜索<img src= 然后替換為 <img v-secure-src=即可實(shí)現(xiàn)。

// directives/secureSrc.js
export const secureSrc = {
  beforeMount(el, binding) {
    if (binding.value && typeof binding.value === 'string') {
      el.src = binding.value.replace(/^http:\/\//i, 'https://')
    }
  },
  updated(el, binding) {
    if (binding.value && typeof binding.value === 'string') {
      el.src = binding.value.replace(/^http:\/\//i, 'https://')
    }
  }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { secureSrc } from './directives/secureSrc'

const app = createApp(App)
app.directive('secure-src', secureSrc)
app.mount('#app')

如果img的src跟的是變量，直接使用指令跟上變量就可以了：

<template>
  <div>
    <!-- 靜態(tài)字符串 -->
    <img v-secure-src="'http://example.com/image1.jpg'" alt="image1">
    
    <!-- 動(dòng)態(tài)變量 -->
    <img v-secure-src="imageUrl" alt="dynamic image">
    
    <!-- 響應(yīng)式數(shù)據(jù) -->
    <img v-secure-src="user.avatar" alt="user avatar">
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 響應(yīng)式數(shù)據(jù)
const imageUrl = ref('http://example.com/image2.jpg')
const user = reactive({
  avatar: 'http://example.com/avatar.jpg'
})

// 可以動(dòng)態(tài)更新
setTimeout(() => {
  imageUrl.value = 'http://another-domain.com/new-image.jpg'
}, 3000)
</script>

方案3:使用指令參數(shù)

可以通過(guò)參數(shù)的形式，將url地址傳遞到指令里面，然后在指令里面修改：

// directives/secureSrc.js
export const secureSrc = {
  beforeMount(el, binding) {
    if (binding.arg === 'url') {
      updateSrc(el, binding.value)
    }
  },
  updated(el, binding) {
    if (binding.arg === 'url') {
      updateSrc(el, binding.value)
    }
  }
}

function updateSrc(el, src) {
  if (src && typeof src === 'string') {
    el.src = src.replace(/^http:\/\//i, 'https://')
  } else {
    el.src = src || ''
  }
}

使用方式：

<template>
  <div>
    <!-- 使用指令參數(shù) -->
    <img v-secure-src:url="dynamicImageUrl" alt="dynamic image">
    <img v-secure-src:url="staticImageUrl" alt="static image">
  </div>
</template>

<script setup>
import { ref } from 'vue'

const dynamicImageUrl = ref('http://example.com/dynamic.jpg')
const staticImageUrl = 'http://example.com/static.jpg'
</script>

方案4:支持修飾符的指令

// directives/secureSrc.js
export const secureSrc = {
  beforeMount(el, binding) {
    processSrc(el, binding)
  },
  updated(el, binding) {
    processSrc(el, binding)
  }
}

function processSrc(el, binding) {
  const src = binding.value
  let processedSrc = src
  
  if (src && typeof src === 'string') {
    // 強(qiáng)制HTTPS修飾符
    if (binding.modifiers.https) {
      processedSrc = src.replace(/^http:\/\//i, 'https://')
    }
    
    // 添加時(shí)間戳修飾符（避免緩存）
    if (binding.modifiers.nocache) {
      const separator = processedSrc.includes('?') ? '&' : '?'
      processedSrc += `${separator}_t=${Date.now()}`
    }
  }
  
  el.src = processedSrc || ''
}

使用方式：

<template>
  <div>
    <!-- 只啟用HTTPS轉(zhuǎn)換 -->
    <img v-secure-src.https="imageUrl" alt="https only">
    
    <!-- 同時(shí)啟用HTTPS和去緩存 -->
    <img v-secure-src.https.nocache="dynamicImage" alt="https and nocache">
  </div>
</template>

<script setup>
import { ref } from 'vue'

const imageUrl = ref('http://example.com/image.jpg')
const dynamicImage = ref('http://example.com/dynamic.jpg')
</script>