vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片

更新時(shí)間：2022年09月01日 08:51:53 作者：余人于RenYu

這篇文章主要介紹了vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。

vue-cli中img使用require動(dòng)態(tài)獲取圖片

做圖片渲染模塊時(shí)，可能涉及到需要循環(huán)渲染的問題，這個(gè)時(shí)候需要使用require,具體就看下面？？？？？

動(dòng)態(tài)獲取圖片地址，路徑被加載器解析為字符串，圖片找不到

這里在motheds 中定義了個(gè)方法獲取

這樣就可以了。。。。。

vue-cli中圖片顯示問題

在基于vue-cli實(shí)際開發(fā)過程中，經(jīng)常遇到關(guān)于圖片顯示的困擾，不管怎么設(shè)置，圖片就是顯示不出來，今天就來簡單說一下這個(gè)問題

實(shí)際開發(fā)環(huán)境中使用圖片最多的場景有以下三種：

1.手動(dòng)引入

<template>
  <img :src="imgurl" />
</template>
<script>
import logo from "../img/logo.png";
// 或
const logo = require("../img/logo.png");
export default {
  data() {
    return {
      imgurl: logo,
    };
  },
};
</script>

【注意：使用require或import方式引入圖片時(shí)，引入路徑是相對(duì)于當(dāng)前文件路徑的，編譯時(shí)webpack會(huì)介入并把路徑處理成服務(wù)器絕路徑】

2.相對(duì)路徑

<img src="../img/logo.png" />

在 vue-cli 中使用相對(duì)路徑時(shí)，webpack 會(huì)自動(dòng)介入，上面的代碼在編譯時(shí)自動(dòng)變成

<img src="require('../img/logo.png')"/>

3.絕對(duì)路徑

<img src="/img/logo.png" />

使用絕對(duì)路徑，首先要了解服務(wù)器根目錄在哪，大家都知道，在vue-cli的項(xiàng)目本身自帶一個(gè)服務(wù)器的，基于webpack-dev-server模塊，根目錄為public文件夾，所以，使用絕對(duì)路徑的方式展示圖片，必須把圖片放到public文件夾，這也是最簡單的一種方式，這種方式webpack不會(huì)介入，所以最終顯示效果與引入時(shí)的代碼一致，代碼如下：

const logo = require('../assets/logo.png');
<img src="/img/logo.png" />
<img src="../assets/logo.png" />
<img :src="logo" />

效果如下：

4.數(shù)據(jù)data中的圖片

<template>
  <ul>
    <li><img :src="item.imgurl" v-for="item in goodslist" /></li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      goodslist: [
        { name: "goods1", imgurl: "../img/goods1.png" },
        { name: "goods2", imgurl: "../img/goods2.png" },
        { name: "goods3", imgurl: "../img/goods3.png" },
      ],
    };
  },
};
</script>

這種情況應(yīng)該是最常見的（ajax請(qǐng)求數(shù)據(jù)回來，然后遍歷寫入到頁面結(jié)構(gòu)中），這個(gè)時(shí)候綁定到src屬性的是一個(gè)變量，無法直接手動(dòng)import或require，如果直接使用imgurl屬性中的路徑，webpack不會(huì)介入處理，所以以上代碼是無法正常顯示圖片的【當(dāng)然首先圖片是沒有防盜鏈的】，解決方法如下：

解決方法一

this.goodslist = this.goodslist.map(item=>{
//雖然路徑是正確的，但以下方式引入會(huì)報(bào)`Cannot find module '../assets/logo.png'`
// item.imgurl = require(item.imgurl); 
// 正確的方式為 
item.imgurl=require('../img'+item.imgurl.replace('../img','')) return item; })

遍歷數(shù)據(jù)，使用前先手動(dòng) require

解決方法二

在數(shù)據(jù)庫端直接使用絕對(duì)路徑，并把所需圖片放到 public目錄中

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

您可能感興趣的文章: