vue 图片路径问题

Question

目录结构如下

1.我试着直接往index.html里面放图片，用static里绝对路径可以实现，但是加载assets里的图片就不行，相对路径也没用,html文件如果想直接加载assets里面的图片怎么实现。
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}">//无效,直接访问imgUrl会报未定义
       <img src="./assets/logo.png">//无效
      <img src="../static/logo.png">
      <router-view class="view" foo="123"></router-view>
    </div>
  `
}).$mount('#app')

如果不用字符串模板的话，可以直接相对路径引用图片转base64引入。但是用上面的字符串模板，无论是data里面的路径还是直接的相对路径都找不到图片，是我的写法有问题吗。
config配置文件我直接用的vue-cli没有变。

Answer 1

你想通过imgUrl保存图片路径，然后使用<img>标签去展示图片的话，有几种方法：

1. 把图片放在src同级的static文件夹下。
2. 把图片放在cdn上，把网络地址存在imgUrl里，然后直接<img :src="imgUrl">去展示。

3. 图片放在assets文件夹，然后在data里面require进图片
   此时，data() {

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

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

Answer 2

vue在打包时只会将static下面的图片保留，assets目录下的图片会转换成base64，直接打包到js文件中，所以你用字符串是读取不到图片的

Answer 3

这种问题一天见一个。

• vue-cli怎么获取static下的图片？
• 在vue页面中用img显示图片，有几种方式引入资源？
• VUE这样绑定图片地址失败