快捷導(dǎo)航

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

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

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

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

問題

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

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

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

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

如果項(xiàng)目中使用的是vite，vite中是不支持require引用的。控制臺(tái)報(bào)錯(cuò)：require is not defined

這個(gè)時(shí)候就需要下載commonJs包

// 下載安裝commonjs包--vite3
yarn add  vite-plugin-commonjs
// vite2中可以安裝這個(gè)
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，和圖片的相對(duì)路徑合并就是一個(gè)完整的URL
const list = ref(
    [{
        src: new URL('相對(duì)路徑', import.meta.url).href,
    }]
)

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

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

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

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

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

不需要webpack處理的圖片,直接使用絕對(duì)路徑調(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原封不動(dòng)地放在了根目錄下。

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'
	}	
}

最后

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue2.x通用條件搜索組件的封裝及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue2.x通用條件搜索組件的封裝及應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景
Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend，接下來給大家介紹Vue中mixin和extend的區(qū)別和使用場(chǎng)景，感興趣的朋友一起看看吧
2019-08-08
tdesign vue初始化組件源碼解析
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
基于vue實(shí)現(xiàn)頁(yè)面滾動(dòng)加載的示例詳解
頁(yè)面內(nèi)容太多會(huì)導(dǎo)致加載速度過慢,這時(shí)可考慮使用滾動(dòng)加載即還沒有出現(xiàn)在可視范圍內(nèi)的內(nèi)容塊先不加載,出現(xiàn)后再加載,所以本文給大家介紹了基于vue實(shí)現(xiàn)頁(yè)面滾動(dòng)加載的示例,需要的朋友可以參考下
2024-01-01
Vue.js 多項(xiàng)目同端口部署實(shí)戰(zhàn)指南(上下文路徑配置指南)
上下文路徑是指 Web應(yīng)用在服務(wù)器上的部署路徑前綴,通過設(shè)置不同的上下文路徑,多個(gè)應(yīng)用可以共享同一個(gè)IP和端口,通過URL路徑來區(qū)分,本文將從前端Vue.js配置到后端服務(wù)器部署,詳細(xì)介紹完整的實(shí)現(xiàn)方案,感興趣的朋友跟隨小編一起看看吧
2026-02-02
淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
vue中返回結(jié)果是promise的處理方式
這篇文章主要介紹了vue中返回結(jié)果是promise的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
在Vue項(xiàng)目中使用URL Query保存和恢復(fù)搜索條件的操作指南
在實(shí)際的前端開發(fā)中,我們經(jīng)常會(huì)遇到這樣的需求：用戶在列表頁(yè)輸入了一些搜索條件,點(diǎn)擊某一條數(shù)據(jù)進(jìn)入詳情頁(yè)；當(dāng)他返回列表頁(yè)時(shí),希望搜索條件能被記住,而不是重新初始化,本文給大家介紹了Vue使用URL Query保存和恢復(fù)搜索條件的操作指南,需要的朋友可以參考下
2025-09-09
vue.js實(shí)現(xiàn)雙擊放大預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)雙擊放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Element-UI結(jié)合遞歸組件實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級(jí)的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09