如何传递imageUrl作为道具？

Question

这是我的部件。它需要一个道具imageUrl，它是String引用来自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>

我就是这样用的：

<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>

但是图像没有加载。

Answer 1

有一个奇怪的JS错误破坏了正确的图像加载(sry，我忘了它是什么，但是不久前我在堆栈溢出上找到了解决方案)。

有帮助的是像这样分解图像请求：

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

所以你只有你的形象名称在道具和加载它没有花括号。现在，您也不必担心正确的路径。@将找到正确的文件夹。

如果有人能更好地解释这一问题的技术细节，或者找到解决方案的另一条线索，请随时详述我的答案。

编辑：解释的第一部分: Webpack不能只使用一个变量作为路径，因为这样它就必须遍历可能的数千个文件。因此，您必须将@/assets/部分作为文本。在这里解释得更好：Vue.js dynamic image src with webpack require() not working

还没找到为什么花括号不起作用。

Answer 2

如果您在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.

Answer 3

对于那些在Vue应用程序中使用Nuxt.js的用户来说，有简单的解决方案，使用static文件夹而不是assets。

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

见文档：

https://nuxtjs.org/docs/2.x/directory-structure/static