关于vue页面中渲染动态的图片路径,我前几天又掉坑里,这让我不得不记录一下这次的问题。难吗?不难!就是一不小心掉坑里面。
首先是最常见的静态用法:

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

还有我们都知道的vue中动态src如下的用法:

<img :src="imgUrl">
data: function () {
    return {
      imgUrl: require("./assets/logo.png"),
    }
}

或者

<img :src="require("./assets/logo.png")">

接下来就是深入的动态变量了,假设图片名字是变量,src的都在指定的assets的文件夹里面。

然后动态路径就拼接起来,如下:

<img :src="require('./assets/'+item+'.png')">

或者

<img :src="require('@/assets/'+item+'.png')">

vue动态引入img的src,不得不说的坑!-Qui-Note
这两个一个是相对路径一个是绝对路径,都可以正常引入图片。

好了,以上就是vue动态引入img的src图片的全部内容,我是七娃,爱前端,爱分享。