vue里面的js引入图片，必须用require

vue里面的js引入图片，必须用require

vue中js引入图片,须用require引入

一般情况下,我们在vue里面引入图片的话,基本上是这样子写的

<img src="../../assets/logo.png" alt="">

但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require
下面列举例子以供参考

<template>
  <div style="display:flex;">
    <div v-for="item in imgUrl" :key="item.id">
      <img :src="item.imgSrc" class="num" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //下面的正确的  注意要用require
      imgUrl: [
        { id: 1, imgSrc: require("../../images/1.jpg") },
        { id: 2, imgSrc: require("../../images/2.jpg") },
        { id: 3, imgSrc: require("../../images/3.jpg") },
        
	    //下面是错误的
	    // {id: 1, imgSrc: "../../images/1.jpg"},
        // {id: 2, imgSrc: "../../images/2.jpg"},
        // {id: 3, imgSrc: "../../images/3.jpg"},
      ],
    };
  },
  created() {},
  methods: {}
};
</script>

<style>
	.num {
 	 margin-right: 1px;
  	 width: 300px !important;
  	 height: 300px !important;
     }
</style>

也可以这么写

const imgUrl = require('@/img/logo.png')
export default {
   data(){
     return {
       tools: [{
          id: 'image',
          label: 'logo',
          url: imgUrl
       }]
     }
   }
}

解析

// 使用require定义之后，你就可以动态使用了，不用require你就只能写死的。

不用 :src="'../img/image.jpg'" //会被解析为字符串

<img src="../img/image.jpg"> // 正常加载

<img :src="'../img/image.jpg'"> // 动态地址，路径被加载器解析为字符串，图片找不到
使用

src1：require('../img/image1.jpg'),

src2：require('../img/image2.jpg'),

index: 1,

<img :src="index = 0 ? src1: src2"> // 动态地址，正常加载
或者 <img :src="require('../../../assets/'+item.name+'_icon.png')">

作者：好多柱
链接：https://www.jianshu.com/p/a0c5c4ecb445
来源：简书

效果