Question

我有一个要导入到页面中的 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

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

Answer 1

道具声明

您的道具未正确声明。您可以将 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 automatically transforms asset URLs into Webpack module requests via require，并且这仅适用于文字值（不适用于由 v-bind 绑定的动态值）。此资产 URL 转换适用于标记和属性的子集（包括 <img>.src），但可以通过其 transformAssetUrls option 进行配置。

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

由于您有动态 img-src 网址，因此它们需要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>

demo

Nuxt - 将相对路径作为 Prop 导致 404

1 个答案:

道具声明

资产 URL 处理