img的src中，要如何使用相對路徑?

vue.js vite img src

greenriver 2023-07-19 16:56:46 ‧ 1163 瀏覽

分享至

大家好，
想請問我在環境Vite+Vue3中，
如下:

<script setup>
import {ref} from 'vue'
const list = ref([
    {
        name:'aa',
        url: '../assets/imgs/aa.png'
    },
    {
        name:'bb',
        url:'../assets/imgs/bb.png'
    },
])
</script>

<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" :key="'list'+index">
                <img :src="item.url" alt="">
            </li>
        </ul>
    </div>
</template>

在img的src中，代入字串的相對路徑，
結果找不到。

必須使用絕對路徑。
但這樣打包時，就會有問題。
想請問這要怎麼解決呢?
感謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

froce

iT邦大師 1 級 ‧ 2023-07-20 08:58:16

最佳解答

方法1，在開頭引入
方法2，動態引入

https://stackoverflow.com/questions/66419471/vue-3-vite-dynamic-image-src

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

// 方法1
import aaURL from '../assets/imgs/aa.png'

const list = ref([
    {
        name:'aa',
        url: aaURL
    },
    {
        name:'bb',
        // 方法2
        url:'new URL('../assets/imgs/bb.png', import.meta.url).href
    },
])
</script>

<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" :key="'list'+index">
                <img :src="item.url" alt="">
            </li>
        </ul>
    </div>
</template>

方法二可以寫個簡單的function，這樣你才可以放在template裡重複用

function toURL(relativePath){
  return new URL(relativePath, import.meta.url).href
}

或是最無腦的方法三，用絕對路徑改成 /src/assets/imgs/aa.png

回應 1
分享
檢舉

greenriver iT邦研究生 5 級 ‧ 2023-07-21 13:25:32 檢舉

謝謝您

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙

img的src中，要如何使用相對路徑?

1 個回答

我要發表回答

標記使用者