查看了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/,图片就正常显示了。