Question

我正在尝试使用props动态绑定img，但由于路径原因，图像未显示。

我尝试使用require，但无法这样做，即require('~@/assets/logo.png')
我在做正确的方法吗？

<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
      <part picture="require('~@/assets/logo.png')" title="Pencard"/>
    </swiper-slide>
    <swiper-slide>
      <part picture="require('~@/assets/logo.png')" title="Register"/>
    </swiper-slide>
    <swiper-slide>
      <part picture="require('~@/assets/logo.png')" title="Service"/>
    </swiper-slide>

</template>

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <img :src="picture"/>
        <div class="content">
          <h1>{{ title }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

图片未显示。

Answer 1

检查是否有帮助-

在您的组件中：

const logo = require('~@/assets/logo.png');

在您的html中：

<part :picture="logo" title="Service"/>

Answer 2

您可以像这样导入所有图像：

// correct your folder directory if I did it wrong 
const images = require.context('@/assets/', false, /\.jpg|\.png$/)

然后在方法中添加loadImg：

methods: {
  loadImg (path) {
    return images('./' + path)
  }
}

然后进入模板：

- <part picture="require('~@/assets/logo.png')" title="Pencard"/>
+ <part :picture="loadImg('logo.png')" title="Pencard"/>

如何使用道具动态绑定img

2 个答案: