img标签?如果你存储你的资产以外的公共文档根。幸运的是,根据你的情况,有一个解决方案!

1 2 3 4 5 6 7

/ /资产/ app.js/ /返回最后,公共道路这个文件/ /路径是相对于这个文件/图像/ logo.png——例如资产进口logoPath从“. . /图片/ logo.png”;让html =' < img src = "$ {logoPath}ACME的标志“alt = > ';

当你需要(或进口)一个图像文件,Webpack拷贝到输出目录,并返回最终的,公共文件的路径。

拷贝文件()方法将这些文件复制到您的最终输出目录。首次启用它webpack.config.js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/ / webpack.config。js安可/ /….setOutputPath(公共/构建/)+ .copyFiles ({+:“。/资产/图像”,++ / /可选的目标路径,相对于输出dir+:“图像/(路径)[名字]。(ext)”,++ / /如果启用了版本控制,添加文件哈希+ / /:“图像/(路径)[名字]。[散列:8]。[ext) ',++ / /只复制文件匹配这个模式+ / /模式:/ \。(png | jpg | jpeg) /美元+})

然后重启安可。当您这样做时,它会给你一个命令您可以运行安装任何缺少的依赖关系。运行这个命令后,重新再来一次,你已经完成了!

这将复制所有文件资产/图片成公共/构建/图片。如果你有启用版本控制,复制文件根据他们的内容将包括一个散列。

呈现在树枝,使用资产()功能:

1 2 3 4 5

{#资产/图片/标志。png是复制到公共/构建/图片/标志。png #}<imgsrc=”{{资产(“构建/图片/ logo.png”)}}”alt=“ACME的标志”>{#资产/图片/子目录/标志。png是公共/构建/图片/子目录复制到/标志。png #}<imgsrc=”{{资产(“构建/图片/子目录/ logo.png”)}}”alt=“ACME的标志”>

确保你已经启用json_manifest_path选项,该选项告诉资产()阅读的最终路径的函数manifest.json文件。如果你不确定什么路径参数传递资产()函数,找到文件manifest.json并使用关键作为参数。