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

如果您要在网址中发送图片的路径，则可以直接使用道具，

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

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

如果所有图像都在同一个文件夹中，则只需将文件名作为props传递即可：

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

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

有助于将图像请求分解如下：

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

因此，道具中只有图像名称，并且无需大括号即可加载它。现在，您也不必担心正确的路径。 @将找到正确的文件夹。

如果任何人都可以更好地解释其技术性或找到解决方案的其他线索，请随时扩大我的答案。

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

至今找不到为什么花括号不起作用的原因。

Answer 4

对于将Nuxt.js用于Vue应用程序的用户-有一个简单的解决方案，使用static文件夹而不是assets。

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

查看文档：

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

如何将图片网址作为道具传递？ Vue

4 个答案: