vue 动态获取图片
时间: 2023-10-09 20:16:53 浏览: 61
在Vue中,如果你想要动态获取图片的路径,可以使用v-bind指令来绑定img的src属性。然而,有一些问题可能会导致图片加载不出来。
一种情况是,通过v-bind绑定的相对路径不会被Webpack的file-loader处理,只会做简单的文本替换。这意味着,如果你使用相对路径来指定图片的位置,图片可能无法正确加载出来。这个问题可以通过引入publicPath并将其拼接在路径中来解决。你可以在img标签中使用v-bind指令来动态绑定publicPath和图片路径,以实现引入路径的动态变动。例如,可以这样写:<img :src="publicPath + 'images/demo.jpg'" alt="">。在编译后,路径会被替换成正确的路径:<img src="/foo/images/demo.jpg" alt="">
另一种方法是使用require函数来动态加载图片。在data中定义一个变量来存储图片的路径,然后在img标签中使用v-bind指令绑定这个变量。例如,可以这样写:<img :src="src">,然后在data中定义变量src并使用require函数来获取图片的路径。这样可以确保图片能够正确加载出来。例如,可以这样定义变量src:data(){ return { src: require('../images/demo.png') } }。
总结起来,Vue中动态获取图片的方法有两种:
1. 使用v-bind指令和publicPath来动态拼接图片路径。
2. 使用require函数来动态加载图片。
希望这些方法能够帮助你解决动态获取图片的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>