Nuxt.js/Vue.js 动态图像不起作用

Question

我从包含图像和其他一些信息的 API 获取一些数据。现在 Nuxt js 有问题，或者我错了。每当我在:src 中提供图像的路径时，它都不起作用。 这是我的代码：

<div v-for="(project, index) in projects" :key="project.p_id" class="swiper-slide">
  <div :id="`index_${index}`" class="slide_wrapper">
    <div class="background">
      <img :src="getImgUrl(project.p_img_path)" alt="project cover image" />
    </div>
    <div class="details">
      <div>
        <div class="left">
          <h2 style="color: black !impor tant">{{ project.p_label }}</h2>
          <small>{{ project.p_date }}</small>
        </div>
        <div class="right">
          <nuxt-link class="btn btn-secondary" to="/" @click="readMore">
            <i class="fas fa-ellipsis-h"></i>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</div>

脚本：

props: ['projects'],
methods: {
  readMore() {},
  getImgUrl(path) {
    return '../../../' + path
  },
},

最后一件事，每当我使用 required required('./assets/'+image.jpg') nuxt.js 时，编译中的崩溃总是停止在 69%。我也试过 required.context 但效果不佳。

任何帮助将不胜感激。提前致谢。

Answer 1

解决方案是我必须将所有图像直接放在资产文件夹中。谢谢大家的时间。

Answer 2

在您的模板中，更改：

<img :src="getImgUrl(project.p_img_path)" alt="project cover image">

收件人：

<img :src="require(`../assets/${project.p_img_path}`)" alt="project cover image">

你不应该需要一个方法来将路径作为字符串返回，只需使用上面的模板文字。

附言。这假设project.p_img_path = img/project_img/filename.jpg，因此根据需要进行调整。