2. 程式人生 > >在vue檔案中js如何引用圖片路徑

在vue檔案中js如何引用圖片路徑

阿新 • • 發佈：2018-12-02

當我們在Vue.js專案中引用圖片時，關於圖片路徑有以下幾種情形：

使用一

我們在data裡面定義好圖片路徑

1

imgUrl:'../assets/logo.png'

然後，在template模板裡面

1

2

/*錯誤寫法*/

<img src="{{imgUrl}}">

這樣是錯誤的寫法，我們應該用v-bind繫結圖片的srcs屬性

1

<img :src="imgUrl">

或者

1

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

這種方式是按照正常HTML語法引用路徑，放在模板裡可以被webpack打包出來。

使用二

當我們需要在js程式碼裡面寫圖片路徑的時候，如果我們在data裡面寫

1

2

/*錯誤寫法*/

imgUrl:'../assets/logo.png'

此時webpack只會把它當做字串處理從而找不到圖片地址，此時我們可以使用import引入圖片路徑：

1

2

<img :src="avatar" />

import avatar from '@/assets/logo.png'

在data裡面定義

1

 

this.img = avatar

情形三

我們也可以把圖片放在外層的static資料夾裡面，然後在data裡面定義：

1

2

imgUrl ： '../../static/logo.png'

<img :src="imgUrl" />

相關推薦

在vue檔案中js如何引用圖片路徑

當我們在Vue.js專案中引用圖片時，關於圖片路徑有以下幾種情形： 使用一 我們在data裡面定義好圖片路徑 1 imgUrl:'../assets/logo.png' 然後，在template模板裡面

關於SpringMvc中js和圖片路徑正確但是不能加載的問題

pla margin host isp alt esp load width found 　　SpringMvc中，在沒有設置攔截特殊的請求時，會默認攔截所有請求，包括js和圖片等靜態請求，造成資源查詢失敗404錯誤（http://localhost:8080/SSHA/j

vue中，本地圖片路徑寫到js中，為何渲染不出來？

首先看一個專案 目錄結構： 程式碼如下： html： <img src="../../assets/logo.png" alt=""> 編譯效果： 是不是圖片顯示出來了，但是如果我的圖片路徑是寫到data裡面的，在img上面，繫結一個d

css和js引用圖片的路徑問題

參考：http://www.cnblogs.com/chyingp/archive/2010/08/21/1805515.html html頁面中，引用js指令碼和css檔案的機制是不一樣的。 (1)對於

vue webpack打包後.css檔案裡面的背景圖片路徑錯誤解決方法

資源相對引用路徑 問題描述 一般情況下，通過webpack+vuecli預設打包的css、js等資源，路徑都是絕對的。 但當部署到帶有資料夾的專案中，這種絕對路徑就會出現問題，因為把配置的static資料夾當成了根路徑，那麼要解決這種問題，就得引用相對路徑。 解決

js檔案中獲取專案訪問路徑

function getRootPath() { var pathName = window.location.pathname.substring(1); var webName = pathName == '' ? '' : pathName.substring(0, pathName.i

vue data中調用圖片的相對路徑

img 直接 分享 ima 路徑 不支持 技術分享 vue bsp 直接將圖片源文件放在項目目錄的static文件夾裏，然後和正常寫圖片路徑那樣寫就可以了，不支持自定義的圖片路徑 vue data中調用圖片的相對路徑

vue在全域性函式中加回調，呼叫vue檔案中的函式

全域性函式可以寫一個檔案globalFunc.js exports.install = function(Vue, option){ Vue.prototype.setData = function(that, key){ that[key] = '222' } Vue.protot

從CSV檔案中讀取jpg圖片的URL地址並多執行緒批量下載

很多時候，我們的網站上傳圖片時並沒有根據內容進行資料夾分類，甚至會直接儲存到阿里雲的OSS或是七牛雲等雲端儲存上。這樣，當我們需要打包圖片時，就需要從資料庫找尋分類圖片，通過CURL進行下載。我最近剛剛完成了一個這樣的任務，覺得會比較常用，就把程式放到了github上分享給大家，希望大家能夠喜歡。 do

Vue專案中設定背景圖片方法

 例如css樣式 background:url("../../assets/head.jpg");  1、在data中定義如下： export default { name: 'productdetailspage', data() { return { n

Mybatis學習總結三之簡化sql對映xml檔案中的引用及解決欄位名與實體類屬性名不相同的衝突

一、為實體類定義別名，簡化sql對映xml檔案中的引用 我們在sql對映xml檔案中的引用實體類時，需要寫上實體類的全類名(包名+類名)，如下：parameterType="com.aiit.pojo.User"這裡寫的實體類User的全類名com.aiit.pojo.User， <i

vue檔案中name屬性作用

官方文件解釋 1.遞迴元件運用（指元件自身元件呼叫自身元件） <article> <div class="item" v-for="(item,index) in lis

vue專案中編寫一個圖片預覽的公用元件

今天產品提出了一個檢視影像的功能需求。 在檢視單據的列表中，有一列是影像欄位，一開始根據單據號呼叫介面檢視是否有圖片附件，如果有則彈出一個全屏的彈出層，如果沒有給出提示。而且，從列表進入詳情之後，附件那邊也會有一個檢視影像的按鈕。 所以，根據需求，多個元件需要用到檢視影像的功能，所以考慮做一個公用元件，通過元

VBA/VBScript提取Word(*.doc)檔案中包含的圖片(照片)

要處理的人事簡歷表是典型的Word文件，其中一人一份doc，裡面包含有個人的照片，如果要把裡面的照片複製出來就比較麻煩了，一般手動的做法是選擇檔案另存為，儲存型別選擇“網頁（*.htm; *.html）”，這樣就會另存為網頁形式，同時會有個以檔名開頭，以.files結尾的資料夾，點選進去就可以看到Word

Vue專案中設定背景圖片

在Vue專案開發中我們經常要向頁面中新增背景圖片，可是當我們在樣式中添加了背景圖片後，編譯打包後，配置到伺服器上時，由於路徑解析的問題，圖片並不能夠正確的顯示出來，如下CSS樣式： background:url("../../assets/head.jpg")

vue 打包找不到圖片路徑

 背景圖要放在static檔案中;在build中的utils.js中的 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, // 背景圖的時候使

如何讓vue檔案中的程式碼在Sublime Text 3中高亮？

大家寫在Sublime Text 3中編寫vue檔案時，會發現沒有程式碼智慧提示，清一色的黑底白字，不會像html、js一樣變成彩色，給我們帶來了很大的不便。所以需要安裝一款叫作Vue Syntax Highlight的外掛，它不僅可以使程式碼高亮起來，還能進行

如何在vue檔案中引入css檔案

 目錄結構 新建vue檔案User.vue <template> <div id="user"> <div class=""> 未引用css檔案渲染樣式{{message}} <

vue-cli專案打包後圖片路徑問題

專案目錄結構如下（圖片習慣放在src->assets->img裡面）第一步，修改config目錄裡面的index.js檔案將 assetsPublicPath: '/' 改為 assetsPublicPath: './'第二步，修改build目錄裡面的utils.

webstorm中es6語法報錯，.vue檔案中es6語法報錯

1.webstorm中es6語法報錯，解決方法： 開啟 Settings => Languages & Frameworks => Javascript把 Javascript Language version 改為 ECMAScript 6 這樣做所有的.js檔案中es6不再報錯，但是.