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

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

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

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

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

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

這里在motheds 中定義了個方法獲取

這樣就可以了。。。。。

vue-cli中圖片顯示問題

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

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

1.手動引入

<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方式引入圖片時，引入路徑是相對于當前文件路徑的，編譯時webpack會介入并把路徑處理成服務器絕路徑】

2.相對路徑

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

在 vue-cli 中使用相對路徑時，webpack 會自動介入，上面的代碼在編譯時自動變成

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

3.絕對路徑

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

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

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

效果如下：

4.數據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>

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

解決方法一

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

遍歷數據，使用前先手動 require

解決方法二

在數據庫端直接使用絕對路徑，并把所需圖片放到 public目錄中

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: