如何将 @nuxt/image 与资产中的图像一起使用

Question

我尝试将 @nuxt/image 与资产文件夹中的图像一起使用；当使用静态文件夹或外部 url 中的图像时，图像也会被优化；但是当在来自资产的图像上使用它时，如下所示：

<nuxt-img
    src="~assets/img/Icone-accueil/row_left.svg"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

我的 html 中有这个结果

<img src="/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg" alt="" class="float-left margin-fleche">

但图像没有出现

Answer 1

根据Nuxt Image doc，图像的默认目录是/static ，您可以通过更新nuxt.config文件来更改它，如下所示。

例如，

image: {
    dir: 'assets/images',
},

现在你可以重写为，

<nuxt-img
    src="/Icone-accueil/row_left.svg"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

Answer 2

来自 nuxt 文档：

\n

\n

在您的 \xe2\x80\x8d\xe2\x80\x8dvue模板中，如果您需要链接到您的资产\n目录，请~/assets/your_image.png在资产之前使用斜杠。

\n

\n

在你的情况下：

\n

<nuxt-img\n    src="~/assets/img/Icone-accueil/row_left.svg"\n    alt=""\n    class="float-left margin-fleche"\n    quality="30"\n/>\n

\n

nuxt 的另一句话：

\n

\n

处理动态图像时，您需要使用 require

\n

\n

<img :src="require(`~/assets/img/${image}.jpg`)" />\n\n

\n

对于您的情况，请检查一下：

\n

<nuxt-img\n    :src="require(`~/assets/img/Icone_accueil/row_left.svg`)"\n    alt=""\n    class="float-left margin-fleche"\n    quality="30"\n/>\n

\n