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 {&nbsp; &nbsp; methods: {&nbsp; &nbsp; show(item) {&nbsp; &nbsp; &nbsp; switch (item.bookId) {&nbsp; &nbsp; &nbsp; &nbsp; case 1186:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dialogImg = img1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dialogVideo =img2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; //省略代码&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; //省略代码&nbsp; &nbsp; }&nbsp; },}</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'))