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

把图片写在dom里面，用你的show()控制v-show

Answer 3

先 var img1 = import('......')
再在case 里
dialogImg = img1

Answer 4

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