快捷導(dǎo)航

Vue中定義src在img標(biāo)簽使用時加載不出來的解決

更新時間：2024年07月25日 08:59:02 作者：Live&&learn

這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue中定義src在img標(biāo)簽使用時加載不出來

問題

路徑正確，但是圖片加載不出來，如下示例：

<!--vue3的語法，vue2類似-->
<template>
    <img  :src=""/>    
</template>
<script setup>
    import {ref} from 'vue';
    const src = ref('圖片路徑')；
</script>

代碼和路徑都沒問題，發(fā)現(xiàn)圖片并未顯示

解決一：使用require引入圖片（commonJs語法）

如果項目中使用的是vite，vite中是不支持require引用的。控制臺報錯：require is not defined

這個時候就需要下載commonJs包

// 下載安裝commonjs包--vite3
yarn add  vite-plugin-commonjs
// vite2中可以安裝這個
npm i @rollup/plugin-commonjs
//2.在vite.config.ts配置中添加該插件（如果是js就換成js版的）
import commonjs from '@rollup/plugin-commonjs';
const plugins = [
    commonjs() as any,// 要放在第一行，否則不生效
];

解決二（使用vite的話，推薦這種方案）

// import.meta.url是當(dāng)前模塊的url，和圖片的相對路徑合并就是一個完整的URL
const list = ref(
    [{
        src: new URL('相對路徑', import.meta.url).href,
    }]
)

Vue中img標(biāo)簽的src屬性總結(jié)

初步接觸vue框架時,好多朋友使用img標(biāo)簽時,設(shè)置動態(tài)src屬性時,可能都會遇到路徑不生效的問題,咱們廢話不多說,開整!!!

img標(biāo)簽引用資源圖片

一般不需要webpack處理的資源放在static,需要經(jīng)過處理的放在assets

1.不需要webpack處理的圖片放在static

不需要webpack處理的圖片,直接使用絕對路徑調(diào)用圖片,如"/static/xx/xxx.png"

栗子

html代碼

<img v-bind:src="imgUrl"/>

js代碼

data(){
	return{
		imgUrl:"/static/logo.png"
	}
}

成功讀取到了logo.png. 執(zhí)行npm run build后查看dist文件，發(fā)現(xiàn)logo.png原封不動地放在了根目錄下。

2.需要webpack處理的圖片放在assets

可以使用import還是require進(jìn)行引入.import為es6語法,require為commonJS形式.

栗子1

<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />

栗子2

<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">

栗子3

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl:require('./assets/logo.png')
	}	
}

也可以直接引用網(wǎng)絡(luò)路徑

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
	}	
}