Vue.js 如何将imageUrl作为道具传递？

这是我的组件。它需要一个props

imageUrl

，它是

字符串

，表示URL中的图像或资产文件夹中的本地资产引用

<template>
    <div class="flex" style="height: 155px;align-items: center">

        <div class="avatar" style="height: 130px;width: 130px">

            <img :src="require(`imageUrl`)" height="130" width="130" style="border-radius: 50%"/>

        </div>
        <div class="flex flex-column" style="margin-left: 31px">

            <div class="flex" style="font-weight: bold">

                {{fullName}}
            </div>
            <div class="flex" style="">
                {{title}}
            </div>

            <div style="height: 20px"></div>

            <div class="flex" style="text-align: start">

                {{content}}

            </div>


        </div>

    </div>
</template>

<script>
    export default {
        name: "ReviewTile",
        props: {
            imageUrl: String,
            fullName: String,
            title: String,
            content: String

        }
    }
</script>

<style scoped>

</style>

{{fullName}}
{{title}}
{{content}}
导出默认值{
名称：“审查文件”，
道具：{
imageUrl:String，
全名：String，
标题：字符串，
内容：字符串
}
}

我是这样使用它的：

<ReviewTile
        image-url="../assets/Eugene.png"
        full-name="Eugene B.
"
        title="UI/UX Designer."
        content="   Christabel is one of the business world’s truly great deal makers and strategists, easily on par with
the best of the strategy consultants and designers I have worked with at SOS-HGIC and Kleio. She is also
a world-class human being."

></ReviewTile>

<div style="background-color: #b7b7b7;height: 1px; margin: 33px 0px"></div>

<ReviewTile
        image-url="../assets/headshot_black1.png"
        full-name="Gilliam D."
        title="Web designer/Developer"
        content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."

></ReviewTile>

:src="require('@/assets/' + imageName + '')"

---

但是没有加载图像。

如果您在url中发送图像路径，那么您可以直接使用道具

但请确保您提供了正确的图像路径。

 <img :src="imageUrl" height="130" width="130" style="border-radius: 50%"/>

同时更改其他组件中的道具名称

// Wrong
<ReviewTile
        image-url="../assets/Eugene.png"
        full-name="Eugene B.

// correct one would be something like this
<ReviewTile
        :imageUrl="../assets/Eugene.png"
        full-name="Eugene B.

//错了
如果您的所有图像都在同一文件夹中，您可以将文件名作为道具传递：



然后在
ReviewTitle
组件中，需要
imageUrl
和资产路径：



注：

如果所有图像都有相同的扩展名
.png
你甚至可以像
image url=“Eugene”
那样写文件名，然后在组件中：
有一个奇怪的JS错误破坏了正确的图像加载（sry，我忘了它是什么，但我不久前在stackoverflow上找到了解决方案）

有助于将映像请求分解为以下内容：

<ReviewTile
        image-url="../assets/Eugene.png"
        full-name="Eugene B.
"
        title="UI/UX Designer."
        content="   Christabel is one of the business world’s truly great deal makers and strategists, easily on par with
the best of the strategy consultants and designers I have worked with at SOS-HGIC and Kleio. She is also
a world-class human being."

></ReviewTile>

<div style="background-color: #b7b7b7;height: 1px; margin: 33px 0px"></div>

<ReviewTile
        image-url="../assets/headshot_black1.png"
        full-name="Gilliam D."
        title="Web designer/Developer"
        content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."

></ReviewTile>

:src="require('@/assets/' + imageName + '')"

因此，你只在道具中有你的图像名称，并加载它而不带花括号。现在，您也不必担心正确的路径。@将找到正确的文件夹

如果有人能更好地解释这个问题的技术细节，或者找到解决方案的另一个线索，请随意扩展我的答案

编辑：解释的第一部分：Webpack不能仅使用变量作为路径，因为这样它可能需要遍历数千个文件。因此，您必须将@/assets/部分作为文本。这里有更详细的解释：

无法找到花括号不起作用的原因。
对于那些在Vue应用程序中使用Nuxt.js的用户，有一个简单的解决方案，使用
静态
文件夹而不是
资产

这两个文件夹之间的关键区别在于静态文件不是由Webpack编译的，因此您可以随意使用变量

见文件：

我已经试过了。它不工作，我确信路径是正确的。“./assets/headshot_black1.png”您是否使用本地项目文件夹图像之外的外部图像进行了测试？此外，道具应该完全相同，似乎您有
它不工作。你说的我都试过了。我注意到使用开发人员控制台时，其他所有资产都以不同的路径加载，谢谢！但是