在Vue中,我们经常需要在页面中展示图片。如果这些图片是静态的,我们可以将它们放在项目中的静态资源文件夹中,即static文件夹下。该文件夹内的文件可以通过绝对路径来引用。
可以看到,我们直接使用/static来引用static文件夹。因为Vue CLI默认已经配置了静态资源的paths,可以直接访问到/static文件夹内的静态资源文件。
当我们需要在Vue组件中使用static文件夹中的图片时,需要先在组件中导入该图片。
<template> <img :src="logoSrc" alt="logo"> </template> <script> import logo from '@/static/img/logo.png' export default { data () { return { logoSrc: logo } } } </script>
我们可以通过在组件中导入静态图片来获取该图片的相对路径,然后将其赋值给组件data中的一个变量,最后通过绑定该变量到img的src属性中来展示图片。
如果我们需要在Vue中使用动态图片,我们可以使用require函数引入图片,然后将其绑定到img的src属性中。我们可以使用Vue的v-for指令来遍历数据,为每个img标签绑定不同的动态图片。
<template> <div v-for="pic in pics" :key="pic.id"> <img :src="require(`@/static/img/${pic.name}.jpg`) alt="动态图片"> </div> </template> <script> export default { data () { return { pics: [ { id: 1, name: 'pic1' }, { id: 2, name: 'pic2' }, { id: 3, name: 'pic3' } ] } } } </script>
通过上述代码,我们可以发现require函数会将相对路径解析成模块,并将其返回为一个模块对象。我们可以将该模块对象绑定到img的src属性中,这样就可以在组件中动态展示图片了。
总的来说,Vue中将图片放在static文件夹中有很多好处。通过这种方式,我们可以轻松地访问静态资源文件夹中的图片,并重用图片资源。同时,将静态图片和动态图片分别存放也有利于我们更好地管理项目资源文件。