时间戳

首页 > 解决方案 > Nuxt - 将相对路径作为道具传递导致 404

javascript - Nuxt - 将相对路径作为道具传递导致 404

问题描述

我有一组要在页面中导入的 json 对象。我正在遍历数据并将对象作为道具传递给组件。对象上 json 数据的一个属性是 img 的相对路径（当前位于我的 /assets/ 文件夹中）。

前任。json

[
    {
        "title":"val1",
        "img": "~/assets/image1.jpg",
        "text":"Lorem ipsum dolor sit amet"

    },
    {
        "title": "val2",
        "img": "~/assets/image2.jpg",
        "text":"Lorem ipsum dolor sit amet"

    },
    {
        "title": "val3",
        "img": "~/assets/image3.jpg",
        "text":"Lorem ipsum dolor sit amet"
 
    }
]

我正在使用的 vue 库的组件（bootstrap-vue）有一个“img-src”指令，它可以获取要显示的图像的 url 或路径。当我将道具传递给这个指令时，我得到了一个错误的图像路径和一个 404。

前任。用法

<div>
    <b-card :img-src="data.img"></b-card>
</div>

<script>
export default {
    props: {
        data: {
            title: String,
            img: String,
            text: String
        }
    }
}
</script>

生成的资产请求 URL 类似于 http://localhost:3000/~/assets/image1.jpg。如果我只是将静态字符串路径传递给指令

<div>
    <b-card img-src="~/assets/image1.jpg"></b-card>
</div>

图像按预期加载，资产的 url 看起来像 http://localhost:3000/_nuxt/assets/image1.jpg

谁能解释这里出了什么问题？

标签： javascriptvue.jsnuxt.js

解决方案

道具声明

您的道具未正确声明。您可以将data道具声明为Object，或单独的道具title，img和text。我认为您的意思是单独声明它们：

export default {
    props: {
        //data: {
        //    title: String,
        //    img: String,
        //    text: String
        //}

        title: String,
        img: String,
        text: String
    }
}

资产 URL 处理

Nuxt 用于vue-loader加载 Vue SFC，并vue-loader 通过 自动将资产 URL 转换为 Webpack 模块请求require，这仅适用于文字值（不适用于由 绑定的动态值v-bind）。此资产 URL 转换适用于标签和属性的子集（包括<img>.src），但可以通过其transformAssetUrls选项进行配置。

bootstrap-vue的 Nuxt 插件配置transformAssetUrls为 include<b-card>.imgSrc，这就是为什么<b-card img-src="~/assets/image1.jpg">无需任何特殊处理即可工作的原因。

由于您有动态img-srcURL，因此它们需要是required：

<template>
  <b-card :img-src="computedImg"></b-card>
</template>

<script>
export default {
  //...
  computed: {
    computedImg() {
      // Workaround `require` issue by prefixing `~/assets`
      // https://stackoverflow.com/q/60569609/6277151
      return require('~/assets/' + this.img.replace(/^~\/assets\//g, ''))
    }
  }
}
</script>

演示

推荐阅读