nuxt中static里面放入图片不出来

查看了static和assets的区别后,决定将图片们放在static下。但路径是在JS中生成的,结果没有显示出来,浏览器标签中后面跟个括号,里面写1x1px,经过尝试也了解到很多知识点:

js中拼路径时表示根路径的动态参数@和~不能正常解析;

即使根据logo等图片地址的规律,在前面加上“_nuxt/”,仍然访问不到;

后来查得:

如果你的静态资源文件需要 Webpack 做构建编译处理,可以放到 assets 目录,否则可以放到 static 目录中去。

Nuxt 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下,像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。

你可以在代码中使用根路径 / 结合资源相对路径来引用静态资源:

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png"/>

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png"/>

于是去掉路径前面的static/,图片就正常显示了。 

    原文作者:daoke_li
    原文地址: https://blog.csdn.net/daoke_li/article/details/102772258
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞