vue-cli 图片动态引入 怎么写呢？图片放在了assets 里面了。

Question

<el-dialog :visible.sync="dialogVisibleImg"  title="查看商品详情" class="prodectData" :show-close="true">    <img :src="dialogImg"style="width: 100%">    <div class="language">      <video :src="dialogVideo" controls></video>    </div>     </el-dialog>  methods: {    show(item) {      var dialogImg;      var dialogVideo;      switch (item.bookId) {        case 1186:          dialogImg = import("../../assets/mathematics.png");          dialogVideo =import("../../assets/video/mathvideo.mp4");          break;        case 1185:          dialogImg = import("../../assets/language.png");          dialogVideo =import("../../assets/video/chinesevideo.mp4");          break;        case 1172:          dialogImg = import("../../assets/english.png");          dialogVideo = import("../../assets/english.png");          break;        default:      }      self.dialogImg = dialogImg;      self.dialogVideo = dialogVideo;      self.dialogVisibleImg = true    }  },同事把图片和视频放在了assets 里面了。这样写，没有效果。。。怎么写呢？

Answer 1

这样写，用import from的写法，代码亲测有效

<script>

import img1 from '../../assets/mathematics.png'

import img2 from '../../assets/language.png'

export default {

    methods: {

    show(item) {

      switch (item.bookId) {

        case 1186:

          dialogImg = img1;

          dialogVideo =img2;

          break;

        //省略代码

      }

      //省略代码

    }

  },

}

</script>

Answer 2

vue-cli里默认是把纯静态资源放在static下的，参见dev-server.js里的这段代码
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))