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

【问题标题】：How to use @nuxt/image with image from assets如何将 @nuxt/image 与资产中的图像一起使用
【发布时间】：2022-10-24 05:24:06
【问题描述】：

我尝试将 @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">

但图像没有出现

【问题讨论】：

您的示例使用的是 .svg 文件，我认为 nuxt-img 不会在那里做任何事情吗？

标签： image nuxt.js

【解决方案1】：

来自 nuxt 文档：

在您的 ‍‍vue 模板中，如果您需要链接到您的资产目录使用~/assets/your_image.png，资产前带有斜线。

在你的情况下：
<nuxt-img
    src="~/assets/img/Icone-accueil/row_left.svg"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>
nuxt 的另一句话：
使用动态图像时，您需要使用 require
<img :src="require(`~/assets/img/${image}.jpg`)" />
在您的情况下，请查看：
<nuxt-img
    :src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
    alt=""
    class="float-left margin-fleche"
    quality="30"
/>

【讨论】：

我返回错误 404 IPX：找不到文件：E:projet-michel 哦-航程-git oah-voyages-version-2static_nuxtssetsimgIcone-accueil ow_left.svg
我编辑了我的答案。核实。也许这有帮助。
不知道为什么，但您确定您的设置未设置为使用 IPX：image.nuxtjs.org/providers/ipx 吗？

【解决方案2】：

将@nuxt/image 与assets/ 文件夹中的图像一起使用不起作用。

以下来自@nuxt/imagedocumentation：

图像应存储在项目的static/ 目录中。

例如，当使用<nuxt-img src="/nuxt-icon.png" /> 时，它应该放在static/nuxt-icon.png 路径下的static/ 文件夹中。

存储在assets/ 目录中的图像未使用 Nuxt 进行处理图像，因为这些图像由 webpack 管理。

【讨论】：