Vue picture path problem

the directory structure is as follows

1. I try to put pictures directly into index.html, using the absolute path in static can be achieved, but loading pictures in assets is not good, and the relative path is useless, how to achieve html files if you want to load pictures in assets directly.
2. And app, is mounted in main.js

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("-sharpapp")

if you don"t need a string template, you can directly refer to the image relative to the path and transfer it to base64. But with the above string template, neither the path in data nor the direct relative path can find the picture. Is there something wrong with my writing?
the vue-cli I used directly in the config configuration file has not changed.

Mar.02,2021

if you want to save the picture path through imgUrl, and then use the tag to display the picture, there are several ways:

  1. put the picture under the static folder at the same level as src.
  2. put the picture on cdn, store the network address in imgUrl, and then display it directly .
  3. put the picture in the assets folder, and then require the picture in data
    at this time, data () {

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

    }
    and then to show it.


vue will only retain the pictures under the static when packing, and the pictures under the assets directory will be converted into base64, and packaged directly into the js file, so you can't read the pictures with a string


.

see one of these problems a day.

Menu