如何将 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

对于那些将 Nuxt.js 用于 Vue 应用程序的人 - 使用 static 文件夹而不是 assets 的简单解决方案。

这两个文件夹的主要区别在于静态不是由 Webpack 编译的——因此你可以随意使用变量。

查看文档：

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

Answer 2

有一个奇怪的 JS 错误会破坏正确的图像加载（抱歉，我忘记了它是什么，但我不久前在 stackoverflow 上找到了解决方案。

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

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

所以你只有你的图像名称在道具中并在没有大括号的情况下加载它。现在您也不必担心正确的路径。 @ 会找到正确的文件夹。

如果有人可以更好地解释此技术细节或找到解决方案的其他线程，请随时扩展我的答案。

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

尚无法找到大括号不起作用的原因。

Answer 3

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

<ReviewTile
  image-url="Eugene.png"
  ...
></ReviewTile>

<ReviewTile
  image-url="headshot_black1.png"
  ...
></ReviewTile>

然后在ReviewTitle 组件中，要求imageUrl 带有资产路径：

<div class="avatar">
  <img :src="require(`../assets/${imageUrl}`)" />
</div>

注意：
如果所有图片都具有相同的扩展名.png，您甚至可以只写image-url="Eugene" 之类的文件名并在组件中：<img :src="require(`../assets/${imageUrl}.png`)" />

Answer 4

如果你是在url中发送图片的路径，那么你可以直接使用props，

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

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