在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue 圖片路徑問(wèn)題

vue 圖片路徑問(wèn)題

目錄結(jié)構(gòu)如下圖片描述

1.我試著直接往index.html里面放圖片,用static里絕對(duì)路徑可以實(shí)現(xiàn),但是加載assets里的圖片就不行,相對(duì)路徑也沒(méi)用,html文件如果想直接加載assets里面的圖片怎么實(shí)現(xiàn)。
2.還有是main.js里面掛載app,

import tImg from './assets/logo.png'
new Vue({
  router,
  data(){
      return {
        imgUrl:'./assets/logo.png'
//        imgUrl:tImg
      }
  },
  mounted(){
      console.log(tImg)
  },
  template: `
    <div id="app">
      <h1>Route props</h1>
      <img src="${tImg}">
      <img src="${this.imgUrl}">//無(wú)效,直接訪問(wèn)imgUrl會(huì)報(bào)未定義
       <img src="./assets/logo.png">//無(wú)效
      <img src="../static/logo.png">
      <router-view class="view" foo="123"></router-view>
    </div>
  `
}).$mount('#app')

如果不用字符串模板的話,可以直接相對(duì)路徑引用圖片轉(zhuǎn)base64引入。但是用上面的字符串模板,無(wú)論是data里面的路徑還是直接的相對(duì)路徑都找不到圖片,是我的寫(xiě)法有問(wèn)題嗎。
config配置文件我直接用的vue-cli沒(méi)有變。

回答
編輯回答
心上人

vue在打包時(shí)只會(huì)將static下面的圖片保留,assets目錄下的圖片會(huì)轉(zhuǎn)換成base64,直接打包到j(luò)s文件中,所以你用字符串是讀取不到圖片的

2017年1月13日 08:40
編輯回答
掛念你

你想通過(guò)imgUrl保存圖片路徑,然后使用<img>標(biāo)簽去展示圖片的話,有幾種方法:

  1. 把圖片放在src同級(jí)的static文件夾下。
  2. 把圖片放在cdn上,把網(wǎng)絡(luò)地址存在imgUrl里,然后直接<img :src="imgUrl">去展示。
  3. 圖片放在assets文件夾,然后在data里面require進(jìn)圖片
    此時(shí),data() {

     imgUrl:require('./assets/logo.png')

    }
    然后<img :src="imgUrl">去展示即可。

2017年4月29日 19:36