极客观点
项目管理
HarmonyOS
使用art-template渲染图片，不会被url-loader处理
- 项目结构
- index.js
const render = require('./template/product.art')
// 配置数据
const data = {
product: [
{
imgSrc: '1.png',
name: '产品1',
price: 100,
},
{
imgSrc: '2.png',
name: '产品2',
price: 200,
},
],
}
// 数据渲染
const html = render(data)
console.log(html)
// 渲染到页面
const proList = document.querySelector('.pro-list')
proList.innerHTML = html
- product.art
{{each product}}
<li>
<img src="~@img/{{$value.imgSrc}}" />
<span>{{$value.name}}</span>
<span>{{$value.price}}</span>
</li>
{{/each}}- index.html
<body>
<div id="app">
<ul class="pro-list"></ul>
</div>
</body>- webpack.dev.config.js
...
module: {
rules: [
{
test: /\.art$/,
loader: 'art-template-loader',
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
outputPath: 'imgs',
},
},
],
},
...
resolve: {
alias: {
'@': resolve(__dirname, '../src'),
'@css': resolve(__dirname, '../src/css'),
'@img': resolve(__dirname, '../src/images'),
}
}
...- 图片路径出错，好像url-loader没有处理
