从路径导入img,由Webpack 5,可以通过以下步骤实现:
npm install webpack file-loader --save-dev
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
]
}
]
}
上述配置中,我们使用了file-loader来处理图片文件。它会将图片文件复制到输出目录,并返回图片文件的URL。
import imgPath from './path/to/image.png';
// 使用imgPath即可获取图片的URL
在上述代码中,'./path/to/image.png'是图片文件的相对路径。Webpack会根据配置将图片文件复制到输出目录,并返回图片文件的URL。
需要注意的是,Webpack会根据配置的publicPath来确定图片文件的URL。在上述配置中,我们将publicPath设置为'images/',因此图片文件的URL会以'images/'开头。
推荐的腾讯云相关产品:腾讯云对象存储(COS),它是一种高可用、高可靠、低成本的云端存储服务,适用于存储和处理任意类型的文件,包括图片文件。您可以通过以下链接了解更多关于腾讯云对象存储的信息:腾讯云对象存储(COS)
请注意,以上答案仅供参考,具体的配置和产品选择可能会根据实际需求和环境而有所不同。
Elastic 中国开发者大会
云+社区沙龙online第5期[架构演进]
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯技术开放日
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯云GAME-TECH游戏开发者技术沙龙
serverless days
Elastic 中国开发者大会
云+社区技术沙龙[第12期]
领取专属 10元无门槛券
手把手带您无忧上云